Open source • En cours

Shopify Functions Workbench

Workbench open source pour exécuter, benchmarker et déboguer des Shopify Functions localement avant déploiement.

Rôle

Conception produit, UX orientée DX, développement full-stack, runner Shopify local et benchmark.

Période

mars 2026

Stack

Next.jsReactNestJSTypeScriptMonaco EditorWebAssembly
Voir les liens du projet →
Run Shopify local réussi : cible product discount, input JSON, output structuré, zéro erreur et timing de diagnostic.
3 exemples exécutables
Product discount, delivery customization et cart transform incluent un Wasm et un payload prêts à tester.
Run + benchmark
Le même endpoint renvoie output, erreurs structurées, diagnostics du runner et timings locaux détaillés.
Scénarios portables
Les configurations de test sont sauvegardées dans le navigateur, exportables et réimportables.

Synthèse

Tester une Shopify Function reste souvent trop lent et trop dépendant d'un cycle complet de build, déploiement, branchement à une boutique puis vérification du résultat.

Livrables

  • Monorepo frontend / backend

  • Runner local `.wasm`

  • Éditeur JSON Monaco

  • Scénarios sauvegardés et import/export

  • Benchmark et diagnostics structurés

  • Exemples Shopify prêts à lancer

Problème

Comment permettre à un développeur Shopify de charger un `.wasm`, fournir un input JSON réaliste et distinguer rapidement une erreur de payload, de configuration ou d’exécution ?

Décisions

  1. Définition d'un contrat `/run` unique pour envoyer le Wasm, l’input JSON et les métadonnées nécessaires au runner.

  2. Validation du chemin Shopify réel avec trois exemples prêts à lancer : product discount, delivery customization et cart transform.

  3. Organisation de l’interface en trois zones stables — setup, input JSON et résultat — puis ajout des scénarios, diagnostics et benchmarks autour de ce flux principal.

Solution

Web app locale permettant d'uploader un `.wasm`, de choisir un type de function Shopify, d'éditer un input JSON et de lancer un run ou un benchmark.

Éditeur JSON Monaco, scénarios sauvegardés dans le navigateur, import/export, actions sur l'output et drawer de détails pour les timings.

Backend NestJS exposant un endpoint `/run`, avec mode mock, mode Shopify réel via les métadonnées CLI et exemples officiels product discount, delivery customization et cart transform.

Ressources

Stack technique

Next.jsReactNestJSTypeScriptMonaco EditorWebAssembly