npm - @graphcommerce/next-ui - Versions diffs - 4.15.1 → 4.16.0 - Mend

@graphcommerce/next-ui 4.15.1 → 4.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/CHANGELOG.md +13 -0
package/FramerScroller/SidebarGallery.tsx +3 -3
package/JsonLd/JsonLd.tsx +10 -8
package/JsonLd/safeJsonLdReplacer.ts +47 -0
package/RenderType/RenderType.tsx +7 -0
package/RenderType/filterNonNullableKeys.ts +20 -0
package/RenderType/index.ts +3 -0
package/RenderType/nonNullable.ts +3 -0
package/index.ts +1 -1
package/package.json +2 -3

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,18 @@
 # Change Log
+## 4.16.0
+### Minor Changes
+- [#1573](https://github.com/graphcommerce-org/graphcommerce/pull/1573) [`1eb131766`](https://github.com/graphcommerce-org/graphcommerce/commit/1eb131766c32db6fcb0a8e83dba2c3d241658595) Thanks [@paales](https://github.com/paales)! - Solve issue where the products query would return multiple products while requesting a single url_key. Filter the result by findByTypename which finds the correct `typename` but also narrows the typescript type.
+### Patch Changes
+- [#1573](https://github.com/graphcommerce-org/graphcommerce/pull/1573) [`87a188d6f`](https://github.com/graphcommerce-org/graphcommerce/commit/87a188d6f216b7f7b9ec95afbe74f1146cb07ce4) Thanks [@paales](https://github.com/paales)! - Sovle issue where changing images in the scroller causes issues rerendering
+- Updated dependencies [[`87a188d6f`](https://github.com/graphcommerce-org/graphcommerce/commit/87a188d6f216b7f7b9ec95afbe74f1146cb07ce4)]:
+  - @graphcommerce/framer-scroller@2.1.27
 ## 4.15.1
 ### Patch Changes

package/FramerScroller/SidebarGallery.tsx CHANGED Viewed

@@ -211,7 +211,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
               ))}
             </Scroller>
             <MotionBox
-              layout
+              layout='position'
               layoutDependency={zoomed}
               className={classes.topRight}
               sx={{
@@ -293,7 +293,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
               }}
             >
               <ScrollerDots
-                layout
+                layout='position'
                 layoutDependency={zoomed}
                 sx={{ backgroundColor: 'background.paper', boxShadow: 6 }}
               />
@@ -328,7 +328,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
             ]}
           >
             <MotionBox
-              layout
+              layout='position'
               layoutDependency={zoomed}
               className={classes.sidebar}
               sx={{

package/JsonLd/JsonLd.tsx CHANGED Viewed

@@ -1,19 +1,21 @@
 import Head from 'next/head'
-import { jsonLdScriptProps } from 'react-schemaorg'
-import { Thing, WithContext } from 'schema-dts'
+import { safeJsonLdReplacer } from './safeJsonLdReplacer'
 export * as SchemaDts from 'schema-dts'
-export type JsonLdProps<T extends Thing> = {
-  item: WithContext<T>
-}
-export function JsonLd<T extends Thing>(props: JsonLdProps<T>) {
+export function JsonLd<T extends { '@type': string }>(props: {
+  item: T & { '@context': 'https://schema.org' }
+}) {
   const { item } = props
   return (
     <Head>
-      <script key='jsonld' {...jsonLdScriptProps<T>(item)} />
+      <script
+        key='jsonld'
+        type='application/ld+json'
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(item, safeJsonLdReplacer) }}
+      />
     </Head>
   )
 }

package/JsonLd/safeJsonLdReplacer.ts ADDED Viewed

@@ -0,0 +1,47 @@
+type JsonValueScalar = string | boolean | number
+type JsonValue = JsonValueScalar | Array<JsonValue> | { [key: string]: JsonValue }
+type JsonReplacer = (_: string, value: JsonValue) => JsonValue | undefined
+const ESCAPE_ENTITIES = Object.freeze({
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&apos;',
+})
+const ESCAPE_REGEX = new RegExp(`[${Object.keys(ESCAPE_ENTITIES).join('')}]`, 'g')
+const ESCAPE_REPLACER = (t: string): string => ESCAPE_ENTITIES[t as keyof typeof ESCAPE_ENTITIES]
+// Utility: Assert never
+function isNever(_: never): void {}
+/**
+ * A replacer for JSON.stringify to strip JSON-LD of illegal HTML entities per
+ * https://www.w3.org/TR/json-ld11/#restrictions-for-contents-of-json-ld-script-elements
+ */
+export const safeJsonLdReplacer: JsonReplacer = (
+  () =>
+  // Replace per https://www.w3.org/TR/json-ld11/#restrictions-for-contents-of-json-ld-script-elements
+  // Solution from https://stackoverflow.com/a/5499821/864313
+  (_: string, value: JsonValue): JsonValue | undefined => {
+    switch (typeof value) {
+      case 'object':
+        // Omit null values.
+        if (value === null) return undefined
+        return value // JSON.stringify will recursively call replacer.
+      case 'number':
+      case 'boolean':
+      case 'bigint':
+        return value // These values are not risky.
+      case 'string':
+        return value.replace(ESCAPE_REGEX, ESCAPE_REPLACER)
+      default: {
+        // We shouldn't expect other types.
+        isNever(value)
+        // JSON.stringify will remove this element.
+        return undefined
+      }
+    }
+  }
+)()

package/RenderType/RenderType.tsx CHANGED Viewed

@@ -38,3 +38,10 @@ export function RenderType<
   return <TypeItem {...typeItemProps} __typename={__typename} />
 }
+export function findByTypename<T extends TypeObject, Typename extends T['__typename']>(
+  type: (T | undefined | null)[] | undefined | null,
+  typename: Typename,
+): FilterTypeByTypename<T, Typename> {
+  return type?.find((item) => item?.__typename === typename) as FilterTypeByTypename<T, Typename>
+}

package/RenderType/filterNonNullableKeys.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import type { OptionalKeysOf, Simplify } from 'type-fest'
+export function filterNonNullableKeys<
+  T extends Record<string, unknown>,
+  Keys extends OptionalKeysOf<T>,
+>(items: (T | null | undefined)[] | null | undefined, values: Keys[]) {
+  if (!items) return []
+  type ResultWithRequired = Simplify<
+    Omit<T, Keys> & {
+      [K in Keys]: NonNullable<T[K]>
+    }
+  >
+  const result = items.filter(
+    (item) => item !== null && typeof item !== 'undefined' && values.every((v) => item?.[v]),
+  )
+  return result as ResultWithRequired[]
+}

package/RenderType/index.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export * from './nonNullable'
+export * from './filterNonNullableKeys'
+export * from './RenderType'

package/RenderType/nonNullable.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export function nonNullable<T>(value: T): value is NonNullable<T> {
+  return value !== null && value !== undefined
+}

package/index.ts CHANGED Viewed

@@ -38,7 +38,7 @@ export * from './Page'
 export * from './PageLoadIndicator/PageLoadIndicator'
 export * from './PageMeta/PageMeta'
 export * from './Pagination/Pagination'
-export * from './RenderType/RenderType'
+export * from './RenderType'
 export * from './Row'
 export * from './SectionContainer/SectionContainer'
 export * from './SectionHeader/SectionHeader'

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.15.1",
+  "version": "4.16.0",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -20,12 +20,11 @@
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.9.3",
     "@graphcommerce/framer-next-pages": "3.2.4",
-    "@graphcommerce/framer-scroller": "2.1.26",
+    "@graphcommerce/framer-scroller": "2.1.27",
     "@graphcommerce/framer-utils": "3.1.4",
     "@graphcommerce/image": "3.1.7",
     "cookie": "^0.5.0",
     "react-is": "^18.2.0",
-    "react-schemaorg": "^2.0.0",
     "schema-dts": "^1.1.0"
   },
   "peerDependencies": {