[Remote-dom]: Migration guide updates (#3011)

* migration guide additions

* re-addition

Author: oliverigor

packages/ui-extensions/docs/surfaces/checkout/staticPages/examples/upgrading-to-2025-10/apis-new.tsx

@@ -1,31 +1,27 @@
 import '@shopify/ui-extensions/preact';
 import {render} from 'preact';
-import {
-  useAttributeValues
-} from '@shopify/ui-extensions/checkout/preact';
 
-export default async () => {
+export default function extension() {
   render(<Extension />, document.body);
 }
 
 function Extension() {
-  const [includeGift] = useAttributeValues(['includeGift']);
   return (
     <s-checkbox
-      checked={includeGift === 'yes'}
       onChange={onCheckboxChange}
       label="Include a complimentary gift"
     />
   );
 }
 
-async function onCheckboxChange(e) {
-  const isChecked = e.target.checked;
+async function onCheckboxChange(event) {
+  const isChecked = event.target.checked;
 
   const result = await shopify.applyAttributeChange({
     type: 'updateAttribute',
     key: 'includeGift',
     value: isChecked ? 'yes' : 'no',
   });
+
   console.log('applyAttributeChange result', result);
 }

packages/ui-extensions/docs/surfaces/checkout/staticPages/examples/upgrading-to-2025-10/apis-old-js.ts

@@ -1,29 +1,23 @@
 import {extension, Checkbox} from '@shopify/ui-extensions/checkout';
 
 export default extension('purchase.checkout.block.render', (root, api) => {
-  api.attributes.subscribe(() => render(root, api));
-  render(root, api);
-});
-
-function render(root, api) {
-  const includeGift = api.attributes.current.some(
-    (attribute) => attribute.key == 'includeGift' && attribute.value == 'yes',
-  );
-
   async function onCheckboxChange(isChecked) {
     const result = await api.applyAttributeChange({
       type: 'updateAttribute',
       key: 'includeGift',
       value: isChecked ? 'yes' : 'no',
     });
+
     console.log('applyAttributeChange result', result);
   }
 
   root.replaceChildren(
     root.createComponent(
       Checkbox,
-      {checked: includeGift, onChange: onCheckboxChange},
+      {
+        onChange: onCheckboxChange,
+      },
       'Include a complimentary gift',
     ),
   );
-}
+});

packages/ui-extensions/docs/surfaces/checkout/staticPages/examples/upgrading-to-2025-10/apis-old-react.tsx

@@ -1,30 +1,28 @@
 import {
   reactExtension,
   Checkbox,
-  useAttributeValues,
-  useApplyAttributeChange,
+  useApi,
 } from '@shopify/ui-extensions-react/checkout';
 
 export default reactExtension('purchase.checkout.block.render', () => (
   <Extension />
 ));
 
 function Extension() {
-  const [includeGift] = useAttributeValues(['includeGift']);
-  const applyAttributeChange = useApplyAttributeChange();
+  const api = useApi();
 
   async function onCheckboxChange(isChecked) {
-    const result = await applyAttributeChange({
+    const result = await api.applyAttributeChange({
       type: 'updateAttribute',
       key: 'includeGift',
       value: isChecked ? 'yes' : 'no',
     });
+
     console.log('applyAttributeChange result', result);
   }
 
-  const checked = includeGift === 'yes';
   return (
-    <Checkbox checked={checked} onChange={onCheckboxChange}>
+    <Checkbox onChange={onCheckboxChange}>
       Include a complimentary gift
     </Checkbox>
   );

packages/ui-extensions/docs/surfaces/checkout/staticPages/examples/upgrading-to-2025-10/hooks-new.tsx

@@ -0,0 +1,30 @@
+import '@shopify/ui-extensions/preact';
+import {render} from 'preact';
+import {useAttributeValues} from '@shopify/ui-extensions/checkout/preact';
+
+export default function extension() {
+  render(<Extension />, document.body);
+}
+
+function Extension() {
+  const [includeGift] = useAttributeValues(['includeGift']);
+  return (
+    <s-checkbox
+      checked={includeGift === 'yes'}
+      onChange={onCheckboxChange}
+      label="Include a complimentary gift"
+    />
+  );
+}
+
+async function onCheckboxChange(event) {
+  const isChecked = event.target.checked;
+
+  const result = await shopify.applyAttributeChange({
+    type: 'updateAttribute',
+    key: 'includeGift',
+    value: isChecked ? 'yes' : 'no',
+  });
+
+  console.log('applyAttributeChange result', result);
+}

packages/ui-extensions/docs/surfaces/checkout/staticPages/examples/upgrading-to-2025-10/hooks-old.tsx

@@ -0,0 +1,31 @@
+import {
+  reactExtension,
+  Checkbox,
+  useAttributeValues,
+  useApplyAttributeChange,
+} from '@shopify/ui-extensions-react/checkout';
+
+export default reactExtension('purchase.checkout.block.render', () => (
+  <Extension />
+));
+
+function Extension() {
+  const [includeGift] = useAttributeValues(['includeGift']);
+  const applyAttributeChange = useApplyAttributeChange();
+
+  async function onCheckboxChange(isChecked) {
+    const result = await applyAttributeChange({
+      type: 'updateAttribute',
+      key: 'includeGift',
+      value: isChecked ? 'yes' : 'no',
+    });
+
+    console.log('applyAttributeChange result', result);
+  }
+
+  return (
+    <Checkbox checked={includeGift === 'yes'} onChange={onCheckboxChange}>
+      Include a complimentary gift
+    </Checkbox>
+  );
+}