POS API smartGrid → action Codemod #23

ShadiBitaraf · 2025-09-18T03:55:44Z

Overview

Adds a codemod to migrate Shopify POS extensions from the deprecated
api.smartGrid.presentModal() → api.action.presentModal().

Key Features

Transforms only presentModal calls, preserving other smartGrid methods
Handles aliases, destructuring, optional chaining, and class-based usage
AST-based, syntax-aware transformations with validation
Backed by new utils library (utils/ast-utils.ts)

Impact

Automates migration of POS extensions with safe, tested transformations
Reduces manual effort and risk of migration errors
Provides reusable utilities for future codemods

Files Added

utils/ast-utils.ts
codemods/pos-api-smartgrid-to-action/ (implementation, tests, docs)

- Set up basic codemod structure with workflow and package configuration - Add TypeScript configuration for development - Implement AST-based smartGrid to action transformation - Add basic test fixtures for validation

- Add getImports() with support for all import patterns - Add getNamedImports() for specific import extraction - Add getVariableAliases() for dynamic alias detection - Add isValidObjectReference() with edge case handling - Provide foundation for reusable codemod utilities

- Extract utility functions (getApiAliases, isValidObjectReference) - Add shouldTransformProperty() helper for cleaner code - Support complex patterns: this?.api?, getApi()?, function calls - Improve alias detection with proper destructuring support - Add comprehensive documentation and comments

- Add shopify-pos-extension.ts with realistic POS patterns - Add legacy-patterns.ts with class-based and complex patterns - Add pos-checkout-extension.js with JavaScript patterns - Add README documentation for testing

mohebifar · 2025-09-18T19:07:36Z

utils/ast-utils.ts

+export interface SgNode {
+  text(): string;
+  kind(): string;
+  parent(): SgNode | null;
+  field(name: string): SgNode | null;
+  getMatch(name: string): SgNode | null;
+  replace(text: string): any;
+  findAll(config: { rule: any }): SgNode[];
+}


You can import SgNode from @codemod.com/jssg-types/main

mohebifar · 2025-09-18T19:08:06Z

utils/ast-utils.ts

+export interface ImportInfo {
+  source: string;
+  specifier: string;
+  node: any;


You should refrain from using any types. This should probably be a SgNode<TS, "import_statement">?

mohebifar · 2025-09-18T19:08:29Z

utils/ast-utils.ts

+export function getVariableAliases(
+  rootNode: any,
+  sourceVar: string,
+  destructuredProps: string[] = []
+): Set<string> {
+  const aliases = new Set<string>([sourceVar]);
+
+  // Pattern 1: const myVar = sourceVar
+  const directAliases = rootNode.findAll({
+    rule: { pattern: `const $VAR = ${sourceVar}` },
+  });
+
+  for (const alias of directAliases) {
+    const varName = alias.getMatch("VAR")?.text();
+    if (varName) {
+      aliases.add(varName);
+    }
+  }
+
+  // Pattern 2: const { prop } = sourceVar (for specified destructured properties)
+  for (const prop of destructuredProps) {
+    const destructuring = rootNode.findAll({
+      rule: { pattern: `const { ${prop} } = ${sourceVar}` },
+    });
+
+    if (destructuring.length > 0) {
+      aliases.add(prop);
+    }
+  }
+
+  return aliases;
+}


This is not taking into account var and let kinds i think

mohebifar · 2025-09-18T19:08:50Z

utils/ast-utils.ts

+  property: string,
+  method?: string
+): any[] {
+  const usages: any[] = [];


no explicit anys

mohebifar · 2025-09-18T19:10:34Z

utils/ast-utils.ts

+  const methodPattern = method ? `.${method}($$$ARGS)` : "";
+
+  for (const alias of objectAliases) {
+    if (alias === property) {
+      // Special case: direct property usage (from destructuring)
+      const directUsages = rootNode.findAll({
+        rule: { pattern: `${alias}${methodPattern}` },
+      });
+      usages.push(...directUsages);
+    } else {
+      // Normal case: alias.property.method()
+      const memberUsages = rootNode.findAll({
+        rule: { pattern: `${alias}.${property}${methodPattern}` },
+      });
+      usages.push(...memberUsages);
+    }
+  }
+
+  // Handle this.alias patterns
+  const thisUsages = rootNode.findAll({
+    rule: {
+      pattern: `this.${
+        Array.from(objectAliases)[0]
+      }.${property}${methodPattern}`,
+    },
+  });
+  usages.push(...thisUsages);
+
+  // Handle optional chaining
+  const optionalUsages = rootNode.findAll({
+    rule: {
+      pattern: `${Array.from(objectAliases)[0]}?.${property}${methodPattern}`,
+    },
+  });
+  usages.push(...optionalUsages);
+
+  // Handle function call patterns
+  const functionCallUsages = rootNode.findAll({
+    rule: { pattern: `$FUNC().${property}${methodPattern}` },
+  });
+  usages.push(...functionCallUsages);
+
+  return usages;


This is a good util function to have, but I'd just traverse the member expression like a linked list instead of using string ops. The current code is not readable and hard to follow (and honestly I can't really trust if it covers all the edge cases as it's heavily relying on ast-grep pattern matchers)

mohebifar · 2025-09-18T19:10:44Z

utils/ast-utils.ts

+ * // Find all Polaris imports
+ * const polarisImports = getImports(rootNode, "@shopify/polaris");
+ */
+export function getImports(rootNode: any, packageName: string): ImportInfo[] {


no explicit any

mohebifar · 2025-09-18T19:10:57Z

utils/ast-utils.ts

+  packageName: string,
+  importName: string
+): any[] {
+  const nodes: any[] = [];


explicit any ❌

mohebifar · 2025-09-18T19:11:06Z

utils/ast-utils.ts

+ * const buttonImports = getNamedImports(rootNode, "@shopify/polaris", "Button");
+ */
+export function getNamedImports(
+  rootNode: any,


mohebifar · 2025-09-18T19:11:18Z

utils/ast-utils.ts

+ * @deprecated Use getImports(rootNode, packageName) instead
+ */
+export function getImportSources(
+  rootNode: any,


- Add getMemberExpressionChain() for robust member expression parsing - Add matchesMemberPattern() for clean pattern validation - Replace findMemberExpressions() with proper AST traversal approach

…ation - Add generic hasImportsMatching() function with flexible pattern matching (includes/startsWith/exact) - Add isPOSUIExtensionsFile() for comprehensive POS UI Extensions detection (old and new packages) - Remove duplicate utility functions from pos-api-smartgrid codemod - Import reusable functions from utils/ast-utils.ts instead of local duplicates

ShadiBitaraf added 5 commits September 17, 2025 20:33

feat: initialize POS API smartGrid migration codemod project

67f35ef

- Set up basic codemod structure with workflow and package configuration - Add TypeScript configuration for development - Implement AST-based smartGrid to action transformation - Add basic test fixtures for validation

test: add comprehensive test samples for pos-api codemod

2c22097

- Add shopify-pos-extension.ts with realistic POS patterns - Add legacy-patterns.ts with class-based and complex patterns - Add pos-checkout-extension.js with JavaScript patterns - Add README documentation for testing

test: add test fixtures for jssg test runner

095eaae

mohebifar reviewed Sep 18, 2025

View reviewed changes

ShadiBitaraf added 7 commits September 18, 2025 19:04

refactor(pos-api-smartgrid): removed extra test files

fd75e06

chore: updfate project dependencies and minor config updates

479dce7

refactor(utils): replace all 'any' types and improve type safety

3e495a6

refactor(utils): replace string patterns with AST linked-list traversal

12322e5

- Add getMemberExpressionChain() for robust member expression parsing - Add matchesMemberPattern() for clean pattern validation - Replace findMemberExpressions() with proper AST traversal approach

refactor(utils): take into account 'var' and 'let' patterns too

c77f41e

chore: update pnpm lockfile

10b0709

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

POS API smartGrid → action Codemod #23

POS API smartGrid → action Codemod #23

Uh oh!

ShadiBitaraf commented Sep 18, 2025

Uh oh!

mohebifar Sep 18, 2025

Uh oh!

mohebifar Sep 18, 2025

Uh oh!

mohebifar Sep 18, 2025

Uh oh!

mohebifar Sep 18, 2025

Uh oh!

mohebifar Sep 18, 2025

Uh oh!

mohebifar Sep 18, 2025

Uh oh!

mohebifar Sep 18, 2025

Uh oh!

mohebifar Sep 18, 2025

Uh oh!

mohebifar Sep 18, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

POS API smartGrid → action Codemod #23

Are you sure you want to change the base?

POS API smartGrid → action Codemod #23

Uh oh!

Conversation

ShadiBitaraf commented Sep 18, 2025

Overview

Key Features

Impact

Files Added

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants