@shopify/ui-extensions-server-kit 5.3.1 → 5.4.1

package/src/i18n.ts

@@ -6,7 +6,7 @@ type Translation = string | {[key: string]: Translation}
 
 export interface Localization {
   defaultLocale: string
-  translations: {[key: string]: {[key: string]: Translation}}
+  translations: Record<string, Record<string, Translation>>
   lastUpdated: number
 }
 
@@ -63,9 +63,7 @@ interface TranslationDictionary {
  * }
  * ```
  */
-interface ExtensionTranslationMap {
-  [key: string]: string
-}
+type ExtensionTranslationMap = Record<string, string>
 
 export const TRANSLATED_KEYS = ['localization', 'name', 'description']
 /**
@@ -105,7 +103,6 @@ function traverseDictionary(
     }
 
     if (typeof value === 'string') {
-      // eslint-disable-next-line node/callback-return
       callback(translationKey, value)
     } else {
       traverseDictionary(value, callback, translationKey)

package/src/state/reducers/extensionServerReducer.test.ts

@@ -103,7 +103,7 @@ describe('extensionServerReducer()', () => {
     const action = createRefreshAction([{uuid: extension.uuid}])
 
     const state1 = extensionServerReducer(previousState, action)
-    // eslint-disable-next-line node/no-unsupported-features/node-builtins
+
     const url1 = new URL(state1.extensions[0].assets.main.url)
     const timestamp1 = url1.searchParams.get('lastUpdated') ?? ''
 
@@ -113,7 +113,7 @@ describe('extensionServerReducer()', () => {
     await new Promise((resolve) => setTimeout(resolve, 1))
 
     const state2 = extensionServerReducer(state1, action)
-    // eslint-disable-next-line node/no-unsupported-features/node-builtins
+
     const url2 = new URL(state2.extensions[0].assets.main.url)
     const timestamp2 = url2.searchParams.get('lastUpdated') ?? ''
 

package/src/testing/extensions.ts

@@ -54,6 +54,7 @@ export function mockExtension(obj: DeepPartial<ExtensionPayload> = {}): Extensio
     // in a generalized, non-surprising way
     extensionPoints: obj.extensionPoints as any,
     capabilities: obj.capabilities as any,
+    supportedFeatures: obj.supportedFeatures as any,
     localization: obj.localization as any,
     authenticatedRedirectStartUrl: obj.authenticatedRedirectStartUrl as any,
     authenticatedRedirectRedirectUrls: obj.authenticatedRedirectRedirectUrls as any,

package/src/types.ts

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-invalid-void-type */
-/* eslint-disable @shopify/strict-component-boundaries */
 import {FlattenedLocalization, Localization} from './i18n'
 import './ExtensionServerClient/types'
 import type {Surface} from './ExtensionServerClient/types'
@@ -94,7 +92,7 @@ export interface ExtensionPoint {
   localization?: FlattenedLocalization | Localization | null
   name: string
   description?: string
-  assets?: {[name: string]: Asset}
+  assets?: Record<string, Asset>
 }
 
 type ExtensionPoints = string[] | ExtensionPoint[] | null
@@ -119,7 +117,7 @@ interface Capabilities {
 export interface ExtensionPayload {
   type: string
   externalType: string
-  assets: {[name: string]: Asset}
+  assets: Record<string, Asset>
   development: {
     hidden: boolean
     status: Status
@@ -143,6 +141,7 @@ export interface ExtensionPayload {
   handle: string
   extensionPoints: ExtensionPoints
   capabilities?: Capabilities
+  supportedFeatures: ExtensionSupportedFeatures
   authenticatedRedirectStartUrl?: string
   authenticatedRedirectRedirectUrls?: string[]
   localization?: FlattenedLocalization | Localization | null
@@ -153,11 +152,15 @@ export interface ExtensionPayload {
       name?: string
       description?: string
       required?: boolean
-      validations?: any[]
+      validations?: unknown[]
     }[]
   }
 }
 
+export interface ExtensionSupportedFeatures {
+  runsOffline: boolean
+}
+
 export enum Status {
   Success = 'success',
 }
@@ -179,4 +182,11 @@ export interface App {
   }
   supportEmail?: string
   supportLocales?: string[]
+  allowedDomains?: string[]
+  assets?: {
+    [key: string]: {
+      url: string
+      lastUpdated: number
+    }
+  }
 }

package/src/utilities/assetToString.ts

@@ -1,7 +1,6 @@
 import type {Asset} from '../types'
 
 export function assetToString(asset: Asset) {
-  // eslint-disable-next-line node/no-unsupported-features/node-builtins
   const url = new URL(asset.url)
   url.searchParams.set('lastUpdated', String(asset.lastUpdated))
   return url.toString()

package/src/utilities/isUIExtension.ts

@@ -1,7 +1,8 @@
-export function isUIExtension(extension: any): extension is ExtensionServer.UIExtension {
+export function isUIExtension(extension: unknown): extension is ExtensionServer.UIExtension {
+  const ext = extension as ExtensionServer.UIExtension
   return (
-    extension.type === 'ui_extension' &&
-    Array.isArray(extension.extensionPoints) &&
-    extension.extensionPoints.every((extensionPoint: any) => typeof extensionPoint === 'object')
+    ext.type === 'ui_extension' &&
+    Array.isArray(ext.extensionPoints) &&
+    ext.extensionPoints.every((extensionPoint: unknown) => typeof extensionPoint === 'object')
   )
 }

package/src/utilities/isValidSurface.ts

@@ -1,7 +1,6 @@
-/* eslint-disable @shopify/strict-component-boundaries */
 import {AVAILABLE_SURFACES} from '../ExtensionServerClient/types'
 import type {Surface} from '../ExtensionServerClient/types'
 
-export function isValidSurface(surface: any): surface is Surface {
-  return surface && AVAILABLE_SURFACES.includes(surface)
+export function isValidSurface(surface: unknown): surface is Surface {
+  return Boolean(surface) && AVAILABLE_SURFACES.includes(surface as Surface)
 }

package/src/utilities/replaceUpdated.ts

@@ -1,10 +1,8 @@
 export function replaceUpdated<T>(arr: T[], updates: T[], cb: (v: T) => unknown): T[] {
   const updatesMap = new Map(updates.map((updated) => [cb(updated), updated]))
   const updated = arr.map((item) => {
-    // eslint-disable-next-line node/callback-return
     const key = cb(item)
     if (updatesMap.has(key)) {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const updated = updatesMap.get(key)!
       updatesMap.delete(key)
       return updated

package/src/utilities/set.ts

@@ -1,9 +1,13 @@
 /**
  * Deep sets an object in a type-safe way
  */
-export function set<TObject, TValue>(obj: TObject, pathFn: (o: TObject) => TValue, value: TValue) {
+export function set<TObject extends object, TValue>(
+  obj: TObject,
+  pathFn: (o: TObject) => TValue,
+  value: TValue,
+): TObject {
   const path: string[] = []
-  const proxy: any = new Proxy(
+  const proxy: unknown = new Proxy(
     {},
     {
       get: (_, prop: string) => {
@@ -12,11 +16,12 @@ export function set<TObject, TValue>(obj: TObject, pathFn: (o: TObject) => TValu
       },
     },
   )
-  pathFn(proxy)
+  pathFn(proxy as TObject)
 
-  const newObj: TObject = {...obj}
+  const newObj = {...obj}
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let current: any = newObj
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
   const lastKey = path.pop()!
 
   for (const key of path) {

package/tests/setup.ts

@@ -1,6 +1,3 @@
-import 'vi-fetch/setup'
-import {mockFetch} from 'vi-fetch'
-
 beforeEach(() => {
-  mockFetch.clearAll()
+  vi.restoreAllMocks()
 })

package/vite.config.mts

@@ -0,0 +1,57 @@
+import {createEntryFiles} from './scripts/create-entry-files.js'
+import {defineConfig} from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  root: path.join(__dirname, 'src'),
+  build: {
+    outDir: path.join(__dirname, 'dist'),
+    lib: {
+      name: 'UIExtensionsServerKit',
+      entry: path.join(__dirname, 'src/index.ts'),
+      formats: ['cjs', 'es'],
+      fileName: (type) => `index.${type}.js`,
+    },
+    rollupOptions: {
+      external: ['react'],
+      input: {
+        index: path.join(__dirname, 'src/index.ts'),
+        testing: path.join(__dirname, 'src/testing/index.ts'),
+      },
+      output: {
+        globals: {
+          react: 'React',
+        },
+        preserveModules: true,
+        assetFileNames: `[name].[ext]`,
+        entryFileNames: ({facadeModuleId}) => {
+          return facadeModuleId.endsWith('testing/index.ts') ? 'index.[format].js' : '[name].[format].js'
+        },
+      },
+    },
+  },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: [path.resolve(__dirname, './tests/setup.ts')],
+    deps: {
+      inline: ['@shopify/react-testing'],
+    },
+  },
+  resolve: {
+    alias: {
+      '@shopify/ui-extensions-test-utils': path.resolve(__dirname, '../ui-extensions-test-utils/src'),
+    },
+  },
+  plugins: [
+    react(),
+    createEntryFiles({
+      files: {
+        index: './dist/index',
+        testing: './dist/testing/index',
+      },
+    }),
+  ],
+})

package/dist/ExtensionServerClient/ExtensionServerClient.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("../i18n.cjs.js"),E=require("../utilities/isValidSurface.cjs.js"),f=require("../utilities/isUIExtension.cjs.js");class g{constructor(n={}){this.EVENT_THAT_WILL_MUTATE_THE_SERVER=["update"],this.listeners={},this.connectionListeners={close:new Set,open:new Set},this.connected=!1,this.uiExtensionsByUuid={},this.id=(Math.random()+1).toString(36).substring(7),this.options=p({...n,connection:{automaticConnect:!0,protocols:[],...n.connection??{}}}),this.setupConnection(this.options.connection.automaticConnect)}connect(n={connection:{}}){const t=S(this.options,n);return JSON.stringify(t)!==JSON.stringify(this.options)&&(this.options=t,this.setupConnection(!0)),()=>{this.closeConnection()}}on(n,t){return this.listeners[n]||(this.listeners[n]=new Set),this.listeners[n].add(t),()=>this.listeners[n].delete(t)}persist(n,t){var s,e,i;if(this.EVENT_THAT_WILL_MUTATE_THE_SERVER.includes(n))return this.options.locales?((e=t.extensions)==null||e.forEach(o=>{h.TRANSLATED_KEYS.forEach(a=>{var c;f.isUIExtension(o)&&((c=o.extensionPoints)==null||c.forEach(l=>{delete l[a]})),delete o[a]})}),(i=this.connection)==null?void 0:i.send(JSON.stringify({event:n,data:t}))):(s=this.connection)==null?void 0:s.send(JSON.stringify({event:n,data:t}));console.warn('You tried to use "persist" with a dispatch event. Please use the "emit" method instead.')}emit(...n){var e;const[t,s]=n;if(this.EVENT_THAT_WILL_MUTATE_THE_SERVER.includes(t))return console.warn(`You tried to use "emit" with a the "${t}" event. Please use the "persist" method instead to persist changes to the server.`);(e=this.connection)==null||e.send(JSON.stringify({event:"dispatch",data:{type:t,payload:s}}))}onConnection(n,t){return this.connectionListeners[n].add(t),()=>this.connectionListeners[n].delete(t)}initializeConnection(){var n;this.connection&&(this.connection.addEventListener("open",t=>{this.connected=!0,this.connectionListeners.open.forEach(s=>s(t))}),this.connection.addEventListener("close",t=>{this.connected=!1,this.connectionListeners.close.forEach(s=>s(t))}),(n=this.connection)==null||n.addEventListener("message",t=>{var s,e;try{const{event:i,data:o}=JSON.parse(t.data);if(i==="dispatch"){const{type:c,payload:l}=o;(s=this.listeners[c])==null||s.forEach(u=>u(l));return}const a=o.extensions?T(o.extensions,this.options.surface):o.extensions;(e=this.listeners[i])==null||e.forEach(c=>{c({...o,extensions:this._getLocalizedExtensions(a)})})}catch(i){console.error("[ExtensionServer] Something went wrong while parsing a server message:",i instanceof Error?i.message:i)}}))}setupConnection(n=!0){this.options.connection.url&&n&&(this.closeConnection(),this.connection=new WebSocket(this.options.connection.url,this.options.connection.protocols),this.initializeConnection())}closeConnection(){var n;this.connected&&((n=this.connection)==null||n.close())}_getLocalizedExtensions(n){return n==null?void 0:n.map(t=>{var a,c,l,u,d;if(!this.options.locales||!f.isUIExtension(t))return t;const e=((c=(a=this.uiExtensionsByUuid[t.uuid])==null?void 0:a.localization)==null?void 0:c.lastUpdated)!==((l=t.localization)==null?void 0:l.lastUpdated)?h.getFlattenedLocalization(t.localization,this.options.locales):((u=this.uiExtensionsByUuid[t.uuid])==null?void 0:u.localization)??t.localization,i=e&&h.isFlattenedTranslations(e)?JSON.parse(e.translations):e,o={...t,localization:e,name:i&&t.name.startsWith("t:")?this._getLocalizedValue(i,t.name):t.name,...t.description&&{description:i&&((d=t.description)!=null&&d.startsWith("t:"))?this._getLocalizedValue(i,t.description):t.description}};return this.uiExtensionsByUuid[t.uuid]={...o,extensionPoints:this._getLocalizedExtensionPoints(e,o)},this.uiExtensionsByUuid[t.uuid]})}_getLocalizedExtensionPoints(n,{extensionPoints:t,name:s,description:e}){return!n||!h.isFlattenedTranslations(n)?t:t==null?void 0:t.map(i=>({...i,localization:n,name:s,...e&&{description:e}}))}_getLocalizedValue(n,t){const s=t.replace("t:","");return n[s]||t}}function S(r,n){return p({...r,...n,connection:{...r.connection,...n.connection}})}function p(r){return E.isValidSurface(r.surface)||delete r.surface,r}function T(r,n){return n?r.filter(t=>t.surface===n?!0:Array.isArray(t.extensionPoints)?t.extensionPoints.filter(i=>typeof i=="string"?!1:i.surface===n).length>0:!1):r}exports.ExtensionServerClient=g;

package/dist/context/ExtensionServerProvider.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("./constants.cjs.js"),o=require("../state/actions/actions.cjs.js"),d=require("../ExtensionServerClient/ExtensionServerClient.cjs.js"),a=require("../hooks/useIsomorphicLayoutEffect.cjs.js"),p=require("../hooks/useExtensionServerState.cjs.js"),r=require("react");function x({children:f,options:S}){const[i,n]=p.useExtensionServerState(),[c,v]=r.useState(S),[t]=r.useState(()=>new d.ExtensionServerClient),u=r.useCallback((s=c)=>{v(s)},[c]);a.useIsomorphicLayoutEffect(()=>t.connect(c),[t,c]),a.useIsomorphicLayoutEffect(()=>{const s=[t.on("update",e=>n(o.createUpdateAction(e))),t.on("connected",e=>n(o.createConnectedAction(e))),t.on("refresh",e=>n(o.createRefreshAction(e))),t.on("focus",e=>n(o.createFocusAction(e))),t.on("unfocus",e=>n(o.createUnfocusAction(e)))];return()=>s.forEach(e=>e())},[n]);const l=r.useMemo(()=>({dispatch:n,state:i,connect:u,client:t}),[n,u,i,t]);return r.createElement(E.extensionServerContext.Provider,{value:l},f)}exports.ExtensionServerProvider=x;

package/dist/context/ExtensionServerProvider.es.js

@@ -1,29 +0,0 @@
-import { extensionServerContext as d } from "./constants.es.js";
-import { createUpdateAction as l, createConnectedAction as v, createRefreshAction as x, createFocusAction as E, createUnfocusAction as S } from "../state/actions/actions.es.js";
-import { ExtensionServerClient as h } from "../ExtensionServerClient/ExtensionServerClient.es.js";
-import { useIsomorphicLayoutEffect as i } from "../hooks/useIsomorphicLayoutEffect.es.js";
-import { useExtensionServerState as A } from "../hooks/useExtensionServerState.es.js";
-import C, { useState as a, useCallback as P, useMemo as R } from "react";
-function I({ children: u, options: f }) {
-  const [c, o] = A(), [n, m] = a(f), [t] = a(() => new h()), s = P(
-    (r = n) => {
-      m(r);
-    },
-    [n]
-  );
-  i(() => t.connect(n), [t, n]), i(() => {
-    const r = [
-      t.on("update", (e) => o(l(e))),
-      t.on("connected", (e) => o(v(e))),
-      t.on("refresh", (e) => o(x(e))),
-      t.on("focus", (e) => o(E(e))),
-      t.on("unfocus", (e) => o(S(e)))
-    ];
-    return () => r.forEach((e) => e());
-  }, [o]);
-  const p = R(() => ({ dispatch: o, state: c, connect: s, client: t }), [o, s, c, t]);
-  return /* @__PURE__ */ C.createElement(d.Provider, { value: p }, u);
-}
-export {
-  I as ExtensionServerProvider
-};

package/dist/hooks/useExtensionServerContext.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../context/constants.cjs.js"),t=require("react"),n=()=>t.useContext(e.extensionServerContext);exports.useExtensionServerContext=n;

package/dist/testing/MockExtensionServerProvider.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../context/ExtensionServerProvider.cjs.js"),c=require("../context/constants.cjs.js"),s=require("../hooks/useExtensionServerContext.cjs.js"),t=require("react");function u({children:n,...e}){const r=s.useExtensionServerContext(),o=t.useMemo(()=>({...r,...e}),[r,e]);return t.createElement(c.extensionServerContext.Provider,{value:o},n)}function v({children:n,options:e={connection:{}},...r}){return t.createElement(i.ExtensionServerProvider,{options:e},t.createElement(u,{...r},n))}exports.MockExtensionServerProvider=v;

package/dist/testing/MockExtensionServerProvider.es.js

@@ -1,24 +0,0 @@
-import { ExtensionServerProvider as i } from "../context/ExtensionServerProvider.es.js";
-import { extensionServerContext as c } from "../context/constants.es.js";
-import { useExtensionServerContext as m } from "../hooks/useExtensionServerContext.es.js";
-import n, { useMemo as v } from "react";
-function a({ children: t, ...e }) {
-  const r = m(), o = v(
-    () => ({
-      ...r,
-      ...e
-    }),
-    [r, e]
-  );
-  return /* @__PURE__ */ n.createElement(c.Provider, { value: o }, t);
-}
-function l({
-  children: t,
-  options: e = { connection: {} },
-  ...r
-}) {
-  return /* @__PURE__ */ n.createElement(i, { options: e }, /* @__PURE__ */ n.createElement(a, { ...r }, t));
-}
-export {
-  l as MockExtensionServerProvider
-};

package/dist/utilities/isUIExtension.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function i(e){return e.type==="ui_extension"&&Array.isArray(e.extensionPoints)&&e.extensionPoints.every(t=>typeof t=="object")}exports.isUIExtension=i;

package/dist/utilities/isValidSurface.es.js

@@ -1,7 +0,0 @@
-import { AVAILABLE_SURFACES as r } from "../ExtensionServerClient/types.es.js";
-function o(i) {
-  return i && r.includes(i);
-}
-export {
-  o as isValidSurface
-};