Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: add support for SSR in DeviceHelperPlugin #249

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

fix: add support for SSR in DeviceHelperPlugin #249

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5ec6ae9
fix: do not run DeviceHelperPlugin on the server
bojanrajh Jul 30, 2024
5160d97
feat: update example, activate ssr
bojanrajh Aug 21, 2024
34c2acf
feat: example plugin
bojanrajh Jul 30, 2024
e78a6e0
fix: prettier
bojanrajh Jul 30, 2024
3148cc5
fix: changeset
bojanrajh Aug 21, 2024
1fba992
fix: snapshots
bojanrajh Aug 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/perfect-bananas-play.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@shopware-ag/meteor-component-library": patch
"nuxt-app": patch
---

Made DeviceHelper Vue plugin SSR-friendly
3 changes: 3 additions & 0 deletions examples/nuxt-app/app.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@
</MtText>

<SwTextField label="A text field" v-model="text" />

<MtTabs :items="[{ label: 'Foo' }, { label: 'Bar' }]" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Though this is enough to test that the DeviceHelper is SSR compatible, I suggest to make this component do something like switching between content. This way we can be sure that switching views also works when using SSR. Additionally it creates a nicer demo page.

Copy link
Contributor Author

@bojanrajh bojanrajh Aug 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally, a full integration test would be needed here. But. We did end up with a few composables which I would like to introduce in separate PRs, maybe even a separate package (@shopware-ag/meteor-nuxt):

  • useMeteorTabs - framework-agnostic, might as well end up in @shopware-ag/meteor-component-library
  • useMeteorToast, useMeteorModal (depends on Nuxt's useState)
  • useMeteorForm - provides a layer between joi (and compatible) and shopware/meteor validation format, along with a few nuxt-based form components based on meteor components
  • useColorMode - composable for managing system/light/dark modes based on meteor dark theme implementation (html attr).

Therefore, I would like to keep those PRs small and update the implementation (for example in the mt-toast.stories.ts and nuxt-app demo) along the way.

</SwBlockStack>

<MtModalRoot>
Expand Down Expand Up @@ -262,6 +264,7 @@ import {
MtModalTrigger,
MtModalAction,
MtText,
MtTabs,
} from "@shopware-ag/meteor-component-library";
import SwBlockStack from "./components/sw-block-stack.vue";

Expand Down
1 change: 1 addition & 0 deletions examples/nuxt-app/nuxt.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@ export default defineNuxtConfig({
host: '127.0.0.1',
port: 3000,
},
ssr: true,
});
5 changes: 5 additions & 0 deletions examples/nuxt-app/plugins/meteor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { DeviceHelperPlugin } from '@shopware-ag/meteor-component-library'

export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(DeviceHelperPlugin)
})
Binary file modified ...-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...t-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions packages/component-library/src/helper/device.helper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@ import { debounce } from "lodash-es";
function DeviceHelper() {
this.listeners = [];

// do not register the resize event listener on the server
if (typeof window === "undefined") {
return;
}

window.addEventListener("resize", this.resize.bind(this));
}

Expand Down