Fix order routing location rule extension template

Author: vividviolet

order-routing-location-rule/package.json.liquid

@@ -3,8 +3,24 @@
   "private": true,
   "version": "1.0.0",
   "license": "UNLICENSED",
+{%- if flavor contains "preact" %}
   "dependencies": {
     "preact": "^10.10.x",
+    "@shopify/ui-extensions": "~2025.10.0-rc"
+  }
+{%- elsif flavor contains "react" %}
+  "dependencies": {
+    "react": "^18.0.0",
+    "@shopify/ui-extensions": "2025.4.x",
+    "@shopify/ui-extensions-react": "2025.4.x",
+    "react-reconciler": "0.29.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0"
+  }
+{%- else %}
+  "dependencies": {
     "@shopify/ui-extensions": "2025.4.x"
   }
+{%- endif %}
 }

order-routing-location-rule/shopify.extension.toml.liquid

@@ -1,4 +1,8 @@
+{%- if flavor contains "preact" -%}
+api_version = "2025-10"
+{% else %}
 api_version = "2025-04"
+{% endif -%}
 
 [[extensions]]
 # Change the merchant-facing name of the extension in locales/en.default.json

order-routing-location-rule/src/OrderRoutingLocationRule.liquid

@@ -1,3 +1,4 @@
+{%- if flavor contains "preact" -%}
 import {render} from 'preact';
 
 export default async () => {
@@ -12,11 +13,7 @@ function Extension() {
   const handleSubmit = () => {
     console.log('submit');
 
-    {% if flavor contains "typescript" %}
-    // const metafields: Parameters<typeof applyMetafieldsChange>[0] = [
-    {% else %}
     // const metafields = [
-    {% endif %}
     //   {
     //     namespace: 'ns',
     //     key: 'config-1',
@@ -47,3 +44,107 @@ function Extension() {
     </s-form>
   );
 }
+
+{%- elseif flavor contains "react" -%}
+import {
+  reactExtension,
+  useApi,
+  Text,
+  Box,
+  Form,
+} from '@shopify/ui-extensions-react/admin';
+
+// The target used here must match the target used in the extension's toml file (./shopify.extension.toml)
+const TARGET = 'admin.settings.order-routing-rule.render';
+
+export default reactExtension(TARGET, () => <App />);
+
+function App() {
+  // The useApi hook provides access to several useful APIs like i18n, data and saveMetafields.
+  const {data, applyMetafieldsChange, i18n} = useApi(TARGET);
+
+  // Transform your state into metafields and send them back to the admin to batch the
+  // changes together with the rest of merchant updates to the routing strategy
+  const handleSubmit = () => {
+    console.log('submit');
+
+    {% if flavor contains "typescript" %}
+    // const metafields: Parameters<typeof applyMetafieldsChange>[0] = [
+    {% else %}
+    // const metafields = [
+    {% endif %}
+    //   {
+    //     namespace: 'ns',
+    //     key: 'config-1',
+    //     type: 'updateMetafield',
+    //     value: '{value: test}',
+    //     valueType: 'json',
+    //   }
+    // ];
+
+    // applyMetafieldsChange(metafields);
+  };
+
+  // Reset your state to the default values
+  const handleOnReset = () => {
+    console.log('reset');
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} onReset={handleOnReset}>
+      <Box padding="base">
+        <Text fontWeight="bold">
+          {i18n.translate('helpText')}
+        </Text>
+      </Box>
+      <Box padding="base">
+        {/* Create a UI to allow merchants to provide configuration values for your location rule function */}
+      </Box>
+    </Form>
+  );
+}
+
+{%- else -%}
+import { extension, Box, Form, Text } from "@shopify/ui-extensions/admin";
+
+// Transform your state into metafields and send them back to the admin to batch the
+// changes together with the rest of merchant updates to the routing strategy
+const handleSubmit = () => {
+  console.log('submit');
+
+    {% if flavor contains "typescript" %}
+    // const metafields: Parameters<typeof applyMetafieldsChange>[0] = [
+    {% else %}
+    // const metafields = [
+    {% endif %}
+    //   {
+    //     namespace: 'ns',
+    //     key: 'config-1',
+    //     type: 'updateMetafield',
+    //     value: '{value: test}',
+    //     valueType: 'json',
+    //   }
+    // ];
+
+    // applyMetafieldsChange(metafields);
+};
+
+// Reset your state to the default values
+const handleOnReset = () => {
+  console.log('reset');
+};
+
+// The target used here must match the target used in the extension's toml file (./shopify.extension.toml)
+export default extension("admin.settings.order-routing-rule.render", (root, { extension: {target}, i18n, data, applyMetafieldsChange }) => {
+  console.log({data});
+  root.appendChild(
+    root.createComponent(
+      Form,
+      { onSubmit: handleSubmit, onReset: handleOnReset },
+      root.createComponent(Box, {padding: 'base'},
+        root.createComponent(Text, { fontWeight: "bold" }, i18n.translate('helpText'))
+      )
+    )
+  );
+});
+{%- endif -%}

order-routing-location-rule/tsconfig.json

@@ -0,0 +1,23 @@
+{%- if flavor contains "preact" -%}
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "target": "ES2020",
+    "checkJs": true,
+    "allowJs": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+  }
+}
+{%- else -%}
+{
+  // This tsconfig.json file is only needed to inform the IDE
+  // About the `react-jsx` tsconfig option, so IDE doesn't complain about missing react import
+  // Changing options here won't affect the build of your extension
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  },
+  "include": ["./src"]
+}
+{%- endif -%}