From 5c6e00f73f353f821d3716f5220786ff56e34e75 Mon Sep 17 00:00:00 2001 From: Kai Vandivier Date: Mon, 9 Dec 2024 15:53:29 +0100 Subject: [PATCH 1/9] refactor: use css modules in example app --- examples/simple-app/src/Alerter.jsx | 11 ++--------- examples/simple-app/src/Alerter.module.css | 6 ++++++ examples/simple-app/src/App.jsx | 5 ++--- examples/simple-app/src/App.module.css | 10 ++++++++++ examples/simple-app/src/App.style.js | 14 -------------- 5 files changed, 20 insertions(+), 26 deletions(-) create mode 100644 examples/simple-app/src/Alerter.module.css create mode 100644 examples/simple-app/src/App.module.css delete mode 100644 examples/simple-app/src/App.style.js diff --git a/examples/simple-app/src/Alerter.jsx b/examples/simple-app/src/Alerter.jsx index f7973eee0..f7077300b 100644 --- a/examples/simple-app/src/Alerter.jsx +++ b/examples/simple-app/src/Alerter.jsx @@ -1,6 +1,7 @@ import { useAlert } from '@dhis2/app-runtime' import { InputField, CheckboxField, Button } from '@dhis2/ui' import React, { useState } from 'react' +import styles from './Alerter.module.css' export const Alerter = () => { const [message, setMessage] = useState('') @@ -12,7 +13,7 @@ export const Alerter = () => { ) return ( -
+
{ /> -
) } diff --git a/examples/simple-app/src/Alerter.module.css b/examples/simple-app/src/Alerter.module.css new file mode 100644 index 000000000..9ff151b25 --- /dev/null +++ b/examples/simple-app/src/Alerter.module.css @@ -0,0 +1,6 @@ +.flexContainer { + display: flex; + align-items: center; + justify-content: space-between; + width: 500px; +} diff --git a/examples/simple-app/src/App.jsx b/examples/simple-app/src/App.jsx index ee37f898c..3642caf63 100644 --- a/examples/simple-app/src/App.jsx +++ b/examples/simple-app/src/App.jsx @@ -2,8 +2,8 @@ import { useDataQuery } from '@dhis2/app-runtime' import moment from 'moment' import React from 'react' import { Alerter } from './Alerter.jsx' -import style from './App.style.js' import i18n from './locales/index.js' +import styles from './App.module.css' const query = { me: { @@ -14,8 +14,7 @@ const query = { const Component = () => { const { error, loading, data } = useDataQuery(query) return ( -
- +
{error && ERROR} {loading && ...} {data && ( diff --git a/examples/simple-app/src/App.module.css b/examples/simple-app/src/App.module.css new file mode 100644 index 000000000..3ee1159e0 --- /dev/null +++ b/examples/simple-app/src/App.module.css @@ -0,0 +1,10 @@ +.appContainer { + width: 100%; + height: 100%; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 1rem; +} \ No newline at end of file diff --git a/examples/simple-app/src/App.style.js b/examples/simple-app/src/App.style.js deleted file mode 100644 index d728f2bbe..000000000 --- a/examples/simple-app/src/App.style.js +++ /dev/null @@ -1,14 +0,0 @@ -import css from 'styled-jsx/css' - -export default css` - div { - width: 100%; - height: 100%; - - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: 1rem; - } -` From 283322930172dec9f27b4f07b4bea3d2c2006a02 Mon Sep 17 00:00:00 2001 From: Kai Vandivier Date: Mon, 9 Dec 2024 15:54:37 +0100 Subject: [PATCH 2/9] chore: remove finished todos in makeViteConfig --- cli/config/makeViteConfig.mjs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cli/config/makeViteConfig.mjs b/cli/config/makeViteConfig.mjs index 97a48e190..c393a53c8 100644 --- a/cli/config/makeViteConfig.mjs +++ b/cli/config/makeViteConfig.mjs @@ -25,7 +25,7 @@ import dynamicImport from 'vite-plugin-dynamic-import' * merged with the main config if the `--allowJsxInJs` flag is passed * to the CLI * - * todo: deprecate -- this config has a performance cost, especially on startup + * ! deprecated -- this config has a performance cost, especially on startup */ const jsxInJsConfig = { plugins: [ @@ -178,7 +178,7 @@ export default ({ paths, config, env, host, force, allowJsxInJs }) => { dynamicImport(), react({ babel: { plugins: ['styled-jsx/babel'] }, - // todo: deprecate with other jsx-in-js config + // ! deprecated with other jsx-in-js config // This option allows HMR of JSX-in-JS files, // but it isn't possible to add with merge config: jsxRuntime: allowJsxInJs ? 'classic' : 'automatic', From df8a1c99ff3acce62954af7c973817c65a46400b Mon Sep 17 00:00:00 2001 From: Kai Vandivier Date: Mon, 9 Dec 2024 16:17:23 +0100 Subject: [PATCH 3/9] chore: add jira issues to todos --- cli/src/commands/deploy.js | 1 + cli/src/lib/compiler/compile.js | 1 + 2 files changed, 2 insertions(+) diff --git a/cli/src/commands/deploy.js b/cli/src/commands/deploy.js index 2798c5ae9..c600b2399 100644 --- a/cli/src/commands/deploy.js +++ b/cli/src/commands/deploy.js @@ -152,6 +152,7 @@ const handler = async ({ cwd = process.cwd(), timeout, ...params }) => { } // todo: modify for multiple/named plugins + // https://dhis2.atlassian.net/browse/LIBS-394 const appUrl = constructAppUrl({ baseUrl: dhis2Config.baseUrl, config, diff --git a/cli/src/lib/compiler/compile.js b/cli/src/lib/compiler/compile.js index 3cc84898d..e68744b52 100644 --- a/cli/src/lib/compiler/compile.js +++ b/cli/src/lib/compiler/compile.js @@ -142,6 +142,7 @@ const compile = async ({ inputDir: paths.src, outputDir: outDir, // todo: handle lib compilations with Vite + // https://dhis2.atlassian.net/browse/LIBS-722 processFileCallback: isAppType ? copyFile : compileFile, watch, }), From 2469b2a4ce4b3173d46660508b1986079076a6f2 Mon Sep 17 00:00:00 2001 From: Kai Vandivier Date: Mon, 9 Dec 2024 16:24:34 +0100 Subject: [PATCH 4/9] refactor: simplify hosted location string ternary --- cli/src/commands/start.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/cli/src/commands/start.js b/cli/src/commands/start.js index b101d36b8..f6a6469b9 100644 --- a/cli/src/commands/start.js +++ b/cli/src/commands/start.js @@ -161,11 +161,12 @@ const handler = async ({ }) const server = await createServer(viteConfig) - const location = config.entryPoints.plugin - ? config.entryPoints.app + let location = '' + if (config.entryPoints.plugin) { + location = config.entryPoints.app ? ' at / and /plugin.html' : ' at /plugin.html' - : '' + } reporter.print( `The app ${chalk.bold( From c54325945a891a3b15728356c885ffb38597956f Mon Sep 17 00:00:00 2001 From: Kai Vandivier Date: Mon, 9 Dec 2024 16:27:38 +0100 Subject: [PATCH 5/9] refactor: remove always truthy condition --- shell/src/PluginLoader.jsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/shell/src/PluginLoader.jsx b/shell/src/PluginLoader.jsx index c583cb463..837215778 100644 --- a/shell/src/PluginLoader.jsx +++ b/shell/src/PluginLoader.jsx @@ -17,9 +17,7 @@ const PluginResizeInner = ({ if (divRef && divRef.current && resizePluginHeight) { const resizeObserver = new ResizeObserver(() => { // the additional pixels currently account for possible horizontal scroll bar - if (resizePluginHeight) { - resizePluginHeight(divRef.current.offsetHeight + 20) - } + resizePluginHeight(divRef.current.offsetHeight + 20) }) resizeObserver.observe(divRef.current) } From 90cd1491269c313c2f6062ffe11a53e65c48ae2c Mon Sep 17 00:00:00 2001 From: Kai Vandivier Date: Mon, 9 Dec 2024 16:28:06 +0100 Subject: [PATCH 6/9] fix(plugin): remove resize observer on cleanup --- shell/src/PluginLoader.jsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/shell/src/PluginLoader.jsx b/shell/src/PluginLoader.jsx index 837215778..6d1e998e1 100644 --- a/shell/src/PluginLoader.jsx +++ b/shell/src/PluginLoader.jsx @@ -20,6 +20,10 @@ const PluginResizeInner = ({ resizePluginHeight(divRef.current.offsetHeight + 20) }) resizeObserver.observe(divRef.current) + return () => { + resizeObserver.unobserve(divRef.current); + resizeObserver.disconnect(); + }; } }, [resizePluginHeight]) From 96bac75a050ca3300ba91e37d4053f6e1dc7aa0b Mon Sep 17 00:00:00 2001 From: Kai Vandivier Date: Mon, 9 Dec 2024 17:03:06 +0100 Subject: [PATCH 7/9] chore: import order --- examples/simple-app/src/App.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/simple-app/src/App.jsx b/examples/simple-app/src/App.jsx index 3642caf63..78bf15760 100644 --- a/examples/simple-app/src/App.jsx +++ b/examples/simple-app/src/App.jsx @@ -2,8 +2,8 @@ import { useDataQuery } from '@dhis2/app-runtime' import moment from 'moment' import React from 'react' import { Alerter } from './Alerter.jsx' -import i18n from './locales/index.js' import styles from './App.module.css' +import i18n from './locales/index.js' const query = { me: { From 14ed3e03ffd3600473e5bb9612a06fa951920aef Mon Sep 17 00:00:00 2001 From: Kai Vandivier Date: Mon, 9 Dec 2024 17:03:32 +0100 Subject: [PATCH 8/9] fix: consistent ref --- shell/src/PluginLoader.jsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/shell/src/PluginLoader.jsx b/shell/src/PluginLoader.jsx index 6d1e998e1..7e9b8a5c1 100644 --- a/shell/src/PluginLoader.jsx +++ b/shell/src/PluginLoader.jsx @@ -15,13 +15,14 @@ const PluginResizeInner = ({ const innerDivRef = useRef() useEffect(() => { if (divRef && divRef.current && resizePluginHeight) { + const container = divRef.current const resizeObserver = new ResizeObserver(() => { // the additional pixels currently account for possible horizontal scroll bar - resizePluginHeight(divRef.current.offsetHeight + 20) + resizePluginHeight(container.offsetHeight + 20) }) - resizeObserver.observe(divRef.current) + resizeObserver.observe(container) return () => { - resizeObserver.unobserve(divRef.current); + resizeObserver.unobserve(container); resizeObserver.disconnect(); }; } From 2555512de9e2cfe08c75321e856f8ac7abac6389 Mon Sep 17 00:00:00 2001 From: Kai Vandivier Date: Mon, 9 Dec 2024 17:08:45 +0100 Subject: [PATCH 9/9] chore: style --- shell/src/PluginLoader.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/shell/src/PluginLoader.jsx b/shell/src/PluginLoader.jsx index 7e9b8a5c1..ee1178df6 100644 --- a/shell/src/PluginLoader.jsx +++ b/shell/src/PluginLoader.jsx @@ -22,9 +22,9 @@ const PluginResizeInner = ({ }) resizeObserver.observe(container) return () => { - resizeObserver.unobserve(container); - resizeObserver.disconnect(); - }; + resizeObserver.unobserve(container) + resizeObserver.disconnect() + } } }, [resizePluginHeight])