Skip to content

Commit

Permalink
feat: fixed dimensions efficiency
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomzemp
tomzemp committed Aug 30, 2024
1 parent 6788af6 commit b8c5142
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 60 deletions.
4 changes: 2 additions & 2 deletions docs/components/Plugin.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,8 @@ const MyPlugin = (propsFromParent) => {
| **pluginSource** | _string_ (url) | _required_ if `pluginShortName` is not provided | The URL of the plugin. If this is not provided, `pluginShortName` must be provided. |
| **onError** | _Function_ | _optional_ | Callback function to be called when an error in the plugin triggers an error boundary. You can use this to pass an error back up to the app and create a custom handling/UX if errors occur in the plugin. In general, it is recommended that you use the plugin's built-in error boundaries |
| **showAlertsInPlugin** | _boolean_ | _optional_ | If `true`, any alerts within the plugin (defined with the `useAlert` hook) will be rendered within the iframe. By default, this is `false`. It is recommended, in general, that you do not override this and allow alerts to be hoisted up to the app level |
| **height** | _number_ | _optional_ | If a height is provided, the iframe will be fixed to the specified height. If no height is provided, the iframe will automatically resize based on its contents. |
| **width** | _number_ | _optional_ | If a width is provided, the iframe will be fixed to the specified width. If no width is provided, the iframe will automatically resize based on its contents. |
| **height** | _number_ | _optional_ | If a height is provided, the iframe will be fixed to the specified height. If no height is provided, the iframe will automatically resize its height based on its contents. The value of `height` will not generally be passed to the plugin, as it is in an internal implementation detail. If you do need to also pass the height to the plugin, you can pass another variable (e.g. `pluginHeight`). |
| **width** | _number_ | _optional_ | If a width is provided, the iframe will be fixed to the specified width. If no width is provided, the iframe will automatically resize its width based on its contents. The value of `width` will not generally be passed to the plugin, as it is in an internal implementation detail. If you do need to also pass the width to the plugin, you can pass another variable (e.g. `pluginWidth`).|

## Plugin Props (custom props)

Expand Down
32 changes: 16 additions & 16 deletions examples/cra/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1054,32 +1054,32 @@
integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==

"@dhis2/app-runtime@file:../../runtime":
version "3.10.4"
version "3.10.6"
dependencies:
"@dhis2/app-service-alerts" "3.10.4"
"@dhis2/app-service-config" "3.10.4"
"@dhis2/app-service-data" "3.10.4"
"@dhis2/app-service-offline" "3.10.4"
"@dhis2/app-service-plugin" "3.10.4"
"@dhis2/app-service-alerts" "3.10.6"
"@dhis2/app-service-config" "3.10.6"
"@dhis2/app-service-data" "3.10.6"
"@dhis2/app-service-offline" "3.10.6"
"@dhis2/app-service-plugin" "3.10.6"

"@dhis2/[email protected].4", "@dhis2/app-service-alerts@file:../../services/alerts":
version "3.10.4"
"@dhis2/[email protected].6", "@dhis2/app-service-alerts@file:../../services/alerts":
version "3.10.6"

"@dhis2/[email protected].4", "@dhis2/app-service-config@file:../../services/config":
version "3.10.4"
"@dhis2/[email protected].6", "@dhis2/app-service-config@file:../../services/config":
version "3.10.6"

"@dhis2/[email protected].4", "@dhis2/app-service-data@file:../../services/data":
version "3.10.4"
"@dhis2/[email protected].6", "@dhis2/app-service-data@file:../../services/data":
version "3.10.6"
dependencies:
react-query "^3.13.11"

"@dhis2/[email protected].4", "@dhis2/app-service-offline@file:../../services/offline":
version "3.10.4"
"@dhis2/[email protected].6", "@dhis2/app-service-offline@file:../../services/offline":
version "3.10.6"
dependencies:
lodash "^4.17.21"

"@dhis2/[email protected].4", "@dhis2/app-service-plugin@file:../../services/plugin":
version "3.10.4"
"@dhis2/[email protected].6", "@dhis2/app-service-plugin@file:../../services/plugin":
version "3.10.6"
dependencies:
post-robot "^10.0.46"

Expand Down
32 changes: 16 additions & 16 deletions examples/query-playground/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1812,32 +1812,32 @@
moment "^2.24.0"

"@dhis2/app-runtime@*", "@dhis2/app-runtime@^2.8.0", "@dhis2/app-runtime@file:../../runtime":
version "3.10.4"
version "3.10.6"
dependencies:
"@dhis2/app-service-alerts" "3.10.4"
"@dhis2/app-service-config" "3.10.4"
"@dhis2/app-service-data" "3.10.4"
"@dhis2/app-service-offline" "3.10.4"
"@dhis2/app-service-plugin" "3.10.4"
"@dhis2/app-service-alerts" "3.10.6"
"@dhis2/app-service-config" "3.10.6"
"@dhis2/app-service-data" "3.10.6"
"@dhis2/app-service-offline" "3.10.6"
"@dhis2/app-service-plugin" "3.10.6"

"@dhis2/[email protected].4", "@dhis2/app-service-alerts@file:../../services/alerts":
version "3.10.4"
"@dhis2/[email protected].6", "@dhis2/app-service-alerts@file:../../services/alerts":
version "3.10.6"

"@dhis2/[email protected].4", "@dhis2/app-service-config@file:../../services/config":
version "3.10.4"
"@dhis2/[email protected].6", "@dhis2/app-service-config@file:../../services/config":
version "3.10.6"

"@dhis2/[email protected].4", "@dhis2/app-service-data@file:../../services/data":
version "3.10.4"
"@dhis2/[email protected].6", "@dhis2/app-service-data@file:../../services/data":
version "3.10.6"
dependencies:
react-query "^3.13.11"

"@dhis2/[email protected].4", "@dhis2/app-service-offline@file:../../services/offline":
version "3.10.4"
"@dhis2/[email protected].6", "@dhis2/app-service-offline@file:../../services/offline":
version "3.10.6"
dependencies:
lodash "^4.17.21"

"@dhis2/[email protected].4", "@dhis2/app-service-plugin@file:../../services/plugin":
version "3.10.4"
"@dhis2/[email protected].6", "@dhis2/app-service-plugin@file:../../services/plugin":
version "3.10.6"
dependencies:
post-robot "^10.0.46"

Expand Down
40 changes: 14 additions & 26 deletions services/plugin/src/Plugin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,17 +32,12 @@ export const Plugin = ({
pluginSource?: string
pluginShortName?: string
propsToPass: any
height?: number
width?: number
}): JSX.Element => {
const iframeRef = useRef<HTMLIFrameElement>(null)

// we do not know what is being sent in passed props, so for stable reference, memoize using JSON representation
const propsToPassNonMemoizedJSON = JSON.stringify(propsToPassNonMemoized)
const propsToPass: any = useMemo(
() => ({ ...propsToPassNonMemoized }),
// eslint-disable-next-line react-hooks/exhaustive-deps
[propsToPassNonMemoizedJSON]
)
const { height, width } = propsToPass
const { height, width } = propsToPassNonMemoized

const { add: alertsAdd } = useContext(AlertsManagerContext)

Expand All @@ -60,26 +55,19 @@ export const Plugin = ({
useState<boolean>(false)

const [inErrorState, setInErrorState] = useState<boolean>(false)
const [pluginHeight, setPluginHeight] = useState<number>(150)
const [pluginWidth, setPluginWidth] = useState<number>(500)

useEffect(() => {
if (height) {
setPluginHeight(height)
}
if (width) {
setPluginWidth(width)
}
}, [height, width])
const [resizedHeight, setPluginHeight] = useState<number>(150)
const [resizedWidth, setPluginWidth] = useState<number>(500)

// since we do not know what props are passed, the dependency array has to be keys of whatever is standard prop
// we exclude height/width from memoization to avoid updates for these properties
const memoizedPropsToPass = useMemo(
() => propsToPass,
() => propsToPassNonMemoized,
/* eslint-disable react-hooks/exhaustive-deps */
[
...Object.keys(propsToPass)
...Object.keys(propsToPassNonMemoized)
.sort()
.map((k) => (propsToPass as any)[k]),
.filter((k) => !['height', 'width'].includes(k))
.map((k) => (propsToPassNonMemoized as any)[k]),
]
/* eslint-enable react-hooks/exhaustive-deps */
)
Expand All @@ -100,8 +88,8 @@ export const Plugin = ({
const iframeProps = {
...memoizedPropsToPass,
alertsAdd,
setPluginHeight,
setPluginWidth,
setPluginHeight: !height ? setPluginHeight : null,
setPluginWidth: !width ? setPluginWidth : null,
setInErrorState,
setCommunicationReceived,
}
Expand Down Expand Up @@ -157,8 +145,8 @@ export const Plugin = ({
ref={iframeRef}
src={pluginSource}
style={{
width: `${pluginWidth}px`,
height: `${pluginHeight}px`,
width: `${width ?? resizedWidth}px`,
height: `${height ?? resizedHeight}px`,
border: 'none',
}}
></iframe>
Expand Down

0 comments on commit b8c5142

Please sign in to comment.