update checkout ui extensions code examples to preact signals

Author: lrsterrett

packages/ui-extensions/docs/surfaces/checkout/reference/examples/analytics-publish.example.tsx

@@ -1,3 +1,4 @@
+import '@shopify/ui-extensions/preact';
 import {render} from 'preact';
 
 export default function extension() {

packages/ui-extensions/docs/surfaces/checkout/reference/examples/analytics-visitor.example.tsx

@@ -1,3 +1,4 @@
+import '@shopify/ui-extensions/preact';
 import {render} from 'preact';
 
 export default function extension() {

packages/ui-extensions/docs/surfaces/checkout/reference/examples/api-subscribable.example.tsx

@@ -1,11 +1,12 @@
+import '@shopify/ui-extensions/preact';
 import {render} from 'preact';
-import {useNote} from '@shopify/ui-extensions/checkout/preact';
 
 export default function extension() {
   render(<Extension />, document.body);
 }
 
 function Extension() {
-  const note = useNote();
-  return <s-text>Note: {note}</s-text>;
+  return (
+    <s-text>Note: {shopify.note.value}</s-text>
+  );
 }

packages/ui-extensions/docs/surfaces/checkout/reference/examples/api.example.tsx

@@ -1,10 +1,13 @@
+import '@shopify/ui-extensions/preact';
 import {render} from 'preact';
 
 export default function extension() {
   render(<Extension />, document.body);
 }
 
 function Extension() {
+  // As of version 2025-10, you no longer need the `useApi` hook.
+  // The full API object is accessible via the global `shopify` object.
   return (
     <s-text>
       Shop name: {shopify.shop.name}

packages/ui-extensions/docs/surfaces/checkout/reference/examples/attribute-values.example.tsx

@@ -1,3 +1,4 @@
+import '@shopify/ui-extensions/preact';
 import {render} from 'preact';
 import {useAttributeValues} from '@shopify/ui-extensions/checkout/preact';
 

packages/ui-extensions/docs/surfaces/checkout/reference/examples/attributes/attribute-change.example.tsx

@@ -1,9 +1,6 @@
+import '@shopify/ui-extensions/preact';
 import {render} from 'preact';
-import {
-  useAttributeValues,
-  useApplyAttributeChange,
-  useInstructions,
-} from '@shopify/ui-extensions/checkout/preact';
+import {useAttributeValues} from '@shopify/ui-extensions/checkout/preact';
 
 export default function extension() {
   render(<Extension />, document.body);
@@ -14,17 +11,14 @@ function Extension() {
     'giftWrap',
   ]);
   const giftWrap = Boolean(giftWrapValue);
-  const applyAttributeChange =
-    useApplyAttributeChange();
-  const instructions = useInstructions();
 
   async function toggleGiftWrap() {
     const result = giftWrap
-      ? await applyAttributeChange({
+      ? await shopify.applyAttributeChange({
           type: 'removeAttribute',
           key: 'giftWrap',
         })
-      : await applyAttributeChange({
+      : await shopify.applyAttributeChange({
           type: 'updateAttribute',
           key: 'giftWrap',
           value: 'true',
@@ -43,7 +37,7 @@ function Extension() {
       <s-button
         onClick={toggleGiftWrap}
         disabled={
-          !instructions.attributes
+          !shopify.instructions.value.attributes
             .canUpdateAttributes
         }
       >

packages/ui-extensions/docs/surfaces/checkout/reference/examples/buyer-journey-intercept/extension-banner.example.tsx

@@ -1,9 +1,7 @@
+import '@shopify/ui-extensions/preact';
 import {render} from 'preact';
 import {useState} from 'preact/hooks';
-import {
-  useBuyerJourneyIntercept,
-  useCartLineTarget,
-} from '@shopify/ui-extensions/checkout/preact';
+import {useBuyerJourneyIntercept} from '@shopify/ui-extensions/checkout/preact';
 
 export default function extension() {
   render(<Extension />, document.body);
@@ -12,11 +10,11 @@ export default function extension() {
 function Extension() {
   const [showError, setShowError] =
     useState(false);
-  const {quantity} = useCartLineTarget();
 
   useBuyerJourneyIntercept(
     ({canBlockProgress}) => {
-      return canBlockProgress && quantity > 1
+      return canBlockProgress &&
+        shopify.target.value.quantity > 1
         ? {
             behavior: 'block',
             reason: 'limited stock',

packages/ui-extensions/docs/surfaces/checkout/reference/examples/buyer-journey-intercept/page-level-error.example.tsx

@@ -1,21 +1,19 @@
+import '@shopify/ui-extensions/preact';
 import {render} from 'preact';
-import {
-  useBuyerJourneyIntercept,
-  useShippingAddress,
-} from '@shopify/ui-extensions/checkout/preact';
+import {useBuyerJourneyIntercept} from '@shopify/ui-extensions/checkout/preact';
 
 export default function extension() {
   render(<Extension />, document.body);
 }
 
 function Extension() {
-  const address = useShippingAddress();
-
   useBuyerJourneyIntercept(
     ({canBlockProgress}) => {
       return canBlockProgress &&
-        address?.countryCode &&
-        address.countryCode !== 'CA'
+        shopify.shippingAddress.value
+          ?.countryCode &&
+        shopify.shippingAddress.value
+          .countryCode !== 'CA'
         ? {
             behavior: 'block',
             reason: 'Invalid shipping country',

packages/ui-extensions/docs/surfaces/checkout/reference/examples/buyer-journey-intercept/target-native-field.example.tsx

@@ -1,21 +1,19 @@
+import '@shopify/ui-extensions/preact';
 import {render} from 'preact';
-import {
-  useBuyerJourneyIntercept,
-  useShippingAddress,
-} from '@shopify/ui-extensions/checkout/preact';
+import {useBuyerJourneyIntercept} from '@shopify/ui-extensions/checkout/preact';
 
 export default function extension() {
   render(<Extension />, document.body);
 }
 
 function Extension() {
-  const address = useShippingAddress();
-
   useBuyerJourneyIntercept(
     ({canBlockProgress}) => {
       return canBlockProgress &&
-        address?.countryCode &&
-        address.countryCode !== 'CA'
+        shopify.shippingAddress.value
+          ?.countryCode &&
+        shopify.shippingAddress.value
+          .countryCode !== 'CA'
         ? {
             behavior: 'block',
             reason: 'Invalid shipping country',

packages/ui-extensions/docs/surfaces/checkout/reference/examples/cart-instructions/attributes.example.tsx

@@ -1,25 +1,19 @@
+import '@shopify/ui-extensions/preact';
 import {render} from 'preact';
-import {
-  useApplyAttributeChange,
-  useInstructions,
-} from '@shopify/ui-extensions/checkout/preact';
 
 export default function extension() {
   render(<Extension />, document.body);
 }
 
 function Extension() {
-  const applyAttributeChange =
-    useApplyAttributeChange();
-  const instructions = useInstructions();
-
   if (
-    instructions.attributes.canUpdateAttributes
+    shopify.instructions.value.attributes
+      .canUpdateAttributes
   ) {
     return (
       <s-button
         onClick={() =>
-          applyAttributeChange({
+          shopify.applyAttributeChange({
             type: 'updateAttribute',
             key: 'loyaltyPoints',
             value: '100',