@shopify/app-bridge-types 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.4.0
+
+### Minor Changes
+
+- [#760](https://github.com/Shopify/extensibility/pull/760) [`4f7742e4aacb581a380c76742689dca617c86b6d`](https://github.com/Shopify/extensibility/commit/4f7742e4aacb581a380c76742689dca617c86b6d) Thanks [@Fionoble](https://github.com/Fionoble)! - Add new s-app-\* types
+
 ## 0.3.0
 
 ### Minor Changes

package/README.md

@@ -13,3 +13,26 @@ You can install Shopify App Bridge Types by using [Yarn](https://yarnpkg.com):
 ```sh
 yarn add --dev @shopify/app-bridge-types
 ```
+
+## Development
+
+### How Types are Generated
+
+The types in this package are automatically generated from the `sandboxes/app-bridge-next` source code:
+
+1. Types are defined in `sandboxes/app-bridge-next/src/features/` 
+2. During build, they're compiled to `sandboxes/app-bridge-next/dist/app-bridge.d.ts`
+3. The build script (`scripts/build.mjs`) processes and copies these types to the `dist` folder
+4. The processed types are then published to npm
+
+### Releasing a New Version
+
+To release a new version of the types package:
+
+1. Make your changes to the type definitions in `sandboxes/app-bridge-next/src/features/`
+2. Run `pnpm changeset` from the root of the repository
+3. Select `@shopify/app-bridge-types` to bump its version
+4. Commit your changes
+5. CI will automatically handle building and publishing the updated package
+
+The automation ensures that the types stay in sync with the app-bridge-next implementation.

package/dist/index.d.ts

@@ -4,11 +4,15 @@ import type {
   AppBridgeElements,
   AppBridgeAttributes,
   UIModalElement as BaseUIModalElement,
+  SAppWindowElement as BaseSAppWindowElement,
   UINavMenuElement as BaseUINavMenuElement,
+  SAppNavElement as BaseSAppNavElement,
   UITitleBarElement as BaseUITitleBarElement,
   UISaveBarElement as BaseUISaveBarElement,
   UIModalAttributes,
+  SAppWindowAttributes,
   UINavMenuAttributes,
+  SAppNavAttributes,
   UITitleBarAttributes,
   UISaveBarAttributes,
   ToastOptions,
@@ -20,7 +24,9 @@ import type {
 export {
   ShopifyGlobal,
   UIModalAttributes,
+  SAppWindowAttributes,
   UINavMenuAttributes,
+  SAppNavAttributes,
   UITitleBarAttributes,
   UISaveBarAttributes,
   ToastOptions,
@@ -37,7 +43,9 @@ declare global {
   interface HTMLAnchorElement extends AugmentedElement<'a'> {}
 
   interface UIModalElement extends BaseUIModalElement {}
+  interface SAppWindowElement extends BaseSAppWindowElement {}
   interface UINavMenuElement extends BaseUINavMenuElement {}
+  interface SAppNavElement extends BaseSAppNavElement {}
   interface UITitleBarElement extends BaseUITitleBarElement {}
   interface UISaveBarElement extends BaseUISaveBarElement {}
 

package/dist/shopify.ts

@@ -136,6 +136,7 @@ interface AppBridgeConfig {
 
 export interface AppBridgeElements {
     'ui-modal': UIModalAttributes;
+    's-app-window': SAppWindowAttributes;
     'ui-nav-menu': UINavMenuAttributes;
     's-app-nav': SAppNavAttributes;
     'ui-save-bar': UISaveBarAttributes;
@@ -948,8 +949,61 @@ export interface SAppNavAttributes {
     children?: any;
 }
 
-export interface SAppNavElement extends HTMLElement {
+interface SAppNavElement_2 extends HTMLElement {
 }
+export type { SAppNavElement_2 as SAppNavElement }
+
+export interface SAppWindowAttributes {
+    /**
+     * A unique identifier for the S-App-Window
+     */
+    id?: string;
+    /**
+     * The URL of the content to display within the S-App-Window.
+     * S-App-Window only supports src-based content (required).
+     */
+    src: string;
+}
+
+interface _SAppWindowElement {
+    /**
+     * Always returns undefined for s-app-window (src-only)
+     */
+    readonly content: undefined;
+    /**
+     * A getter/setter for the s-app-window src URL
+     */
+    src?: string;
+    /**
+     * A getter for the Window object of the s-app-window iframe.
+     * Only accessible when the s-app-window is open.
+     */
+    readonly contentWindow?: Window | null;
+    /**
+     * Shows the s-app-window element
+     */
+    show?(): Promise<void>;
+    /**
+     * Hides the s-app-window element
+     */
+    hide?(): Promise<void>;
+    /**
+     * Toggles the s-app-window element between showing and hidden states
+     */
+    toggle?(): Promise<void>;
+    /**
+     * Add 'show' | 'hide' event listeners.
+     */
+    addEventListener?(type: 'show' | 'hide', listener: EventListenerOrEventListenerObject): void;
+    /**
+     * Remove 'show' | 'hide' event listeners.
+     */
+    removeEventListener?(type: 'show' | 'hide', listener: EventListenerOrEventListenerObject): void;
+}
+
+interface SAppWindowElement_2 extends Omit<HTMLElement, 'addEventListener' | 'removeEventListener'>, Required<Omit<_SAppWindowElement, 'src' | 'contentWindow'>>, Pick<_SAppWindowElement, 'src' | 'contentWindow'> {
+}
+export type { SAppWindowElement_2 as SAppWindowElement }
 
 interface SaveBarApi extends Required<_SaveBarApi> {
 }
@@ -1154,7 +1208,7 @@ interface _UIModalElement {
     /**
      * A getter/setter that is used to set modal variant.
      */
-    variant?: Variant;
+    variant?: 'small' | 'base' | 'large' | 'max';
     /**
      * A getter/setter that is used to get the DOM content of the modal
      * element and update the content after the modal has been opened.
@@ -1172,15 +1226,15 @@ interface _UIModalElement {
      */
     readonly contentWindow?: Window | null;
     /**
-     * Shows the save bar element
+     * Shows the modal element
      */
     show?(): Promise<void>;
     /**
-     * Hides the save bar element
+     * Hides the modal element
      */
     hide?(): Promise<void>;
     /**
-     * Toggles the save bar element between the showing and hidden states
+     * Toggles the modal element between the showing and hidden states
      */
     toggle?(): Promise<void>;
     /**
@@ -1341,8 +1395,6 @@ type UserApi = () => Promise<User>;
  */
 type UserResult = 'granted-all' | 'declined-all';
 
-type Variant = 'small' | 'base' | 'large' | 'max';
-
 interface WebVitalsApi {
     onReport?: (callback: WebVitalsCallback | null) => Promise<void>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/app-bridge-types",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Companion types library for the Shopify App Bridge script",
   "private": false,
   "publishConfig": {