update checkout ui extensions code examples to preact signals

.changeset/silver-lemons-design.md

@@ -0,0 +1,5 @@
+---
+'@shopify/ui-extensions': patch
+---
+
+Add Preact Signal code examples to Checkout UI api docs

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',

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

@@ -1,23 +1,19 @@
+import '@shopify/ui-extensions/preact';
 import {render} from 'preact';
-import {
-  useApplyCartLinesChange,
-  useInstructions,
-} from '@shopify/ui-extensions/checkout/preact';
 
 export default function extension() {
   render(<Extension />, document.body);
 }
 
 function Extension() {
-  const applyCartLinesChange =
-    useApplyCartLinesChange();
-  const instructions = useInstructions();
-
-  if (instructions.lines.canAddCartLine) {
+  if (
+    shopify.instructions.value.lines
+      .canAddCartLine
+  ) {
     return (
       <s-button
         onClick={() =>
-          applyCartLinesChange({
+          shopify.applyCartLinesChange({
             type: 'addCartLine',
             merchandiseId:
               'gid://shopify/product/1234',

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

@@ -1,25 +1,19 @@
+import '@shopify/ui-extensions/preact';
 import {render} from 'preact';
-import {
-  useApplyShippingAddressChange,
-  useInstructions,
-} from '@shopify/ui-extensions/checkout/preact';
 
 export default function extension() {
   render(<Extension />, document.body);
 }
 
 function Extension() {
-  const applyShippingAddressChange =
-    useApplyShippingAddressChange();
-  const instructions = useInstructions();
-
   if (
-    instructions.delivery.canSelectCustomAddress
+    shopify.instructions.value.delivery
+      .canSelectCustomAddress
   ) {
     return (
       <s-button
         onClick={() =>
-          applyShippingAddressChange({
+          shopify.applyShippingAddressChange({
             type: 'updateShippingAddress',
             address: {
               zip: '90201',

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

@@ -1,25 +1,19 @@
+import '@shopify/ui-extensions/preact';
 import {render} from 'preact';
-import {
-  useApplyDiscountCodeChange,
-  useInstructions,
-} from '@shopify/ui-extensions/checkout/preact';
 
 export default function extension() {
   render(<Extension />, document.body);
 }
 
 function Extension() {
-  const applyDiscountCodeChange =
-    useApplyDiscountCodeChange();
-  const instructions = useInstructions();
-
   if (
-    instructions.discounts.canUpdateDiscountCodes
+    shopify.instructions.value.discounts
+      .canUpdateDiscountCodes
   ) {
     return (
       <s-button
         onClick={() =>
-          applyDiscountCodeChange({
+          shopify.applyDiscountCodeChange({
             type: 'addDiscountCode',
             code: 'FREE_SHIPPING',
           })

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

@@ -1,25 +1,19 @@
+import '@shopify/ui-extensions/preact';
 import {render} from 'preact';
-import {
-  useApplyMetafieldChange,
-  useInstructions,
-} from '@shopify/ui-extensions/checkout/preact';
 
 export default function extension() {
   render(<Extension />, document.body);
 }
 
 function Extension() {
-  const applyMetafieldChange =
-    useApplyMetafieldChange();
-  const instructions = useInstructions();
-
   if (
-    instructions.metafields.canSetCartMetafields
+    shopify.instructions.value.metafields
+      .canSetCartMetafields
   ) {
     return (
       <s-button
         onClick={() =>
-          applyMetafieldChange({
+          shopify.applyMetafieldChange({
             type: 'updateCartMetafield',
             metafield: {
               namespace: 'loyalty',

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

@@ -1,22 +1,18 @@
+import '@shopify/ui-extensions/preact';
 import {render} from 'preact';
-import {
-  useApplyNoteChange,
-  useInstructions,
-} from '@shopify/ui-extensions/checkout/preact';
 
 export default function extension() {
   render(<Extension />, document.body);
 }
 
 function Extension() {
-  const applyNoteChange = useApplyNoteChange();
-  const instructions = useInstructions();
-
-  if (instructions.notes.canUpdateNote) {
+  if (
+    shopify.instructions.value.notes.canUpdateNote
+  ) {
     return (
       <s-button
         onClick={() =>
-          applyNoteChange({
+          shopify.applyNoteChange({
             type: 'updateNote',
             note: 'Please include a free gift.',
           })

packages/ui-extensions/docs/surfaces/checkout/reference/examples/cart-line-item/default.example.tsx

@@ -1,15 +1,15 @@
+import '@shopify/ui-extensions/preact';
 import {render} from 'preact';
-import {useCartLineTarget} from '@shopify/ui-extensions/checkout/preact';
 
 export default function extension() {
   render(<Extension />, document.body);
 }
 
 function Extension() {
-  const {
-    merchandise: {title},
-  } = useCartLineTarget();
   return (
-    <s-text>Line item title: {title}</s-text>
+    <s-text>
+      Line item title:{' '}
+      {shopify.target.value.merchandise.title}
+    </s-text>
   );
 }