Merge pull request #443 from ownego/update/optimize-breakpoints

Author: juzser

src/components/AppProvider/AppProvider.vue

@@ -22,6 +22,7 @@ import { getTheme } from '@/utilities/use-theme';
 import { useMediaQueryContext } from '@/use/useMediaQuery';
 import { useFocusManagerContext } from '@/use/useFocusManager';
 import { useEphemeralPresenceManagerContext } from '@/use/useEphemeralPresenceManager';
+import { useBreakpointsContext } from '@/use/useBreakpoints';
 
 export type AppProviderProps = {
   theme?: ThemeName;
@@ -52,6 +53,7 @@ const scrollLockManager = new ScrollLockManager();
 const { isNavigationCollapsed } = useMediaQueryContext();
 const focusManager = useFocusManagerContext();
 const ephemeralPresenceManager = useEphemeralPresenceManagerContext();
+const { breakpoints } = useBreakpointsContext();
 
 const portalsContainerRef = ref<HTMLElement | null>(null);
 
@@ -152,6 +154,7 @@ provide('media-query', { isNavigationCollapsed });
 provide('portals-manager', portalsContainerRef);
 provide('focus-manager', focusManager);
 provide('ephemeral-presence-manager', ephemeralPresenceManager);
+provide('breakpoints', breakpoints);
 </script>
 
 <style lang="scss">

src/use/useBreakpoints.ts

@@ -1,10 +1,16 @@
-import { onBeforeUnmount, ref } from 'vue';
+import { onBeforeUnmount, ref, inject } from 'vue';
 import {getMediaConditions, themeDefault} from '@shopify/polaris-tokens';
+import type { BreakpointsTokenGroup } from '@shopify/polaris-tokens';
 import type {
-  BreakpointsAlias,
-  BreakpointsAliasDirection,
-  BreakpointsTokenGroup,
-} from '@shopify/polaris-tokens';
+  BreakpointsDirectionAlias,
+  BreakpointsMatches,
+  BreakpointsContextType
+ } from '@/utilities/breakpoints';
+
+export function useBreakpoints() {
+  const context = inject('breakpoints', {}) as BreakpointsContextType;
+  return context;
+}
 
 const Breakpoints = {
   // TODO: Update to smDown
@@ -38,20 +44,6 @@ export function stackedContent() {
     : window.matchMedia(`(max-width: ${Breakpoints.stackedContent})`);
 }
 
-/**
- * Directional alias for each Polaris `breakpoints` token.
- *
- * @example 'smUp' | 'smDown' | 'smOnly' | 'mdUp' | etc.
- */
-export type BreakpointsDirectionAlias =
-  `${BreakpointsAlias}${Capitalize<BreakpointsAliasDirection>}`;
-
-/**
- * Match results for each directional Polaris `breakpoints` alias.
- */
-type BreakpointsMatches = {
-  [DirectionAlias in BreakpointsDirectionAlias]: boolean;
-};
 
 const breakpointsQueryEntries = getBreakpointsQueryEntries(
   themeDefault.breakpoints,
@@ -122,7 +114,7 @@ export interface UseBreakpointsOptions {
  * const breakpoints = useBreakpoints({defaults: true});
  * breakpoints //=> All values will be `true` during SSR
  */
-export function useBreakpoints(options?: UseBreakpointsOptions) {
+export function useBreakpointsContext(options?: UseBreakpointsOptions) {
   // On SSR, and initial CSR, we force usage of the defaults to avoid a
   // hydration mismatch error.
   // Later, in the effect, we will call this again on the client side without
@@ -163,7 +155,9 @@ export function useBreakpoints(options?: UseBreakpointsOptions) {
     });
   });
 
-  return breakpoints;
+  return {
+    breakpoints,
+  }
 }
 
 /**
@@ -200,3 +194,4 @@ export function getBreakpointsQueryEntries(breakpoints: BreakpointsTokenGroup) {
 function capitalize(str: string) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
+

src/utilities/breakpoints/index.ts

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

src/utilities/breakpoints/types.ts

@@ -0,0 +1,24 @@
+import type { Ref } from 'vue';
+import type {
+  BreakpointsAlias,
+  BreakpointsAliasDirection,
+} from '@shopify/polaris-tokens';
+
+/**
+ * Directional alias for each Polaris `breakpoints` token.
+ *
+ * @example 'smUp' | 'smDown' | 'smOnly' | 'mdUp' | etc.
+ */
+export type BreakpointsDirectionAlias =
+  `${BreakpointsAlias}${Capitalize<BreakpointsAliasDirection>}`;
+
+/**
+ * Match results for each directional Polaris `breakpoints` alias.
+ */
+export type BreakpointsMatches = {
+  [DirectionAlias in BreakpointsDirectionAlias]: boolean;
+};
+
+export interface BreakpointsContextType {
+  breakpoints: Ref<BreakpointsMatches>;
+}