@adobe-commerce/elsie 2.0.0 → 2.0.1-alpha-20260728135101

package/bin/builders/generate/component/index.js

@@ -2,9 +2,9 @@
  *  Copyright 2025 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 const path = require('path');
@@ -53,7 +53,7 @@ module.exports = async function newComponentBuilder({
       await writeFile(
         path.resolve(dir, `${basename}.css`),
         templateStyles({ basename, cssPrefix }),
-        force
+        force,
       );
     }
 
@@ -61,28 +61,28 @@ module.exports = async function newComponentBuilder({
     await writeFile(
       path.resolve(dir, `${basename}.stories.tsx`),
       templateStory({ name, basename, pathname, group, importPath }),
-      force
+      force,
     );
 
     // Write Jest Test file
     await writeFile(
       path.resolve(dir, `${basename}.test.tsx`),
       templateTest({ name, basename, pathname, group, importPath, cssPrefix }),
-      force
+      force,
     );
 
     // Write Component file
     await writeFile(
       path.resolve(dir, `${basename}.tsx`),
       templateComponent({ basename, importPath, skipCSS, cssPrefix }),
-      force
+      force,
     );
 
     // Write Index file
     await writeFile(
       path.resolve(dir, 'index.ts'),
       templateIndex({ basename, importPath }),
-      force
+      force,
     );
 
     // Update parent index.ts

package/bin/builders/generate/config/index.js

@@ -2,9 +2,9 @@
  *  Copyright 2025 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 const path = require('path');
@@ -56,8 +56,8 @@ module.exports = async function newConfigBuilder({ name, force }) {
     console.log(
       m(
         `Update your \x1b[33mtsconfig.json\x1b[0m to include path \x1b[33m"paths": { "${value}": ["./src/*'] }\x1b[0m`,
-        'warning'
-      )
+        'warning',
+      ),
     );
   }
 };

package/bin/builders/generate/config/templates/elsie.js

@@ -1,7 +1,7 @@
 const { source } = require('common-tags');
 
 module.exports = ({ name, importPath }) =>
-`/********************************************************************
+  `/********************************************************************
  *  Copyright 2025 Adobe
  *  All Rights Reserved.
  *

package/bin/builders/generate/container/index.js

@@ -2,9 +2,9 @@
  *  Copyright 2025 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 const path = require('path');
@@ -39,28 +39,28 @@ module.exports = async function newContainerBuilder({ pathname, force }) {
     await writeFile(
       path.resolve(dir, `${basename}.stories.tsx`),
       templateStory({ basename, pathname, importPath }),
-      force
+      force,
     );
 
     // Write Jest Test file
     await writeFile(
       path.resolve(dir, `${basename}.test.tsx`),
       templateTest({ name, basename, pathname, importPath }),
-      force
+      force,
     );
 
     // Write Container file
     await writeFile(
       path.resolve(dir, `${basename}.tsx`),
       templateComponent({ basename, importPath }),
-      force
+      force,
     );
 
     // Write Index file
     await writeFile(
       path.resolve(dir, 'index.ts'),
       templateIndex({ basename, importPath }),
-      force
+      force,
     );
 
     // Update parent index.ts

package/bin/builders/generate/index.js

@@ -2,9 +2,9 @@
  *  Copyright 2025 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 const path = require('path');
@@ -35,7 +35,7 @@ module.exports = function generateResourceBuilder(yargs) {
           },
         });
       },
-      require('./config')
+      require('./config'),
     )
 
     // New Api Function
@@ -61,14 +61,14 @@ module.exports = function generateResourceBuilder(yargs) {
               throw new Error(
                 m(
                   'Configuration file ".elsie.cjs" not found. Make sure you are in the root directory of your project or generate a new one.',
-                  'error'
-                )
+                  'error',
+                ),
               );
             }
 
             if (!config.name) {
               throw new Error(
-                m(`Missing \x1b[31mname\x1b[0m in "./.elsie.cjs".`, 'error')
+                m(`Missing \x1b[31mname\x1b[0m in "./.elsie.cjs".`, 'error'),
               );
             }
 
@@ -86,10 +86,10 @@ module.exports = function generateResourceBuilder(yargs) {
                   .map((e) =>
                     m(
                       `Invalid \x1b[31mapi.${e}\x1b[0m value "${config.api[e]}" in "./.elsie.cjs".`,
-                      'error'
-                    )
+                      'error',
+                    ),
                   )
-                  .join('\n')
+                  .join('\n'),
               );
             }
 
@@ -98,17 +98,17 @@ module.exports = function generateResourceBuilder(yargs) {
               throw new Error(
                 m(
                   `\x1b[4m${basename}\x1b[0m is not a valid API function name. Try naming your API function with camel case. i.e. \x1b[4m${toCamelCase(
-                    basename
+                    basename,
                   )}\x1b[0m`,
-                  'error'
-                )
+                  'error',
+                ),
               );
             }
 
             return true;
           }, false);
       },
-      require('./api')
+      require('./api'),
     )
 
     // New Component
@@ -140,8 +140,8 @@ module.exports = function generateResourceBuilder(yargs) {
               throw new Error(
                 m(
                   'Configuration file ".elsie.cjs" not found. Make sure you are in the root directory of your project or generate a new one.',
-                  'error'
-                )
+                  'error',
+                ),
               );
             }
 
@@ -151,7 +151,7 @@ module.exports = function generateResourceBuilder(yargs) {
 
             if (!config.name) {
               throw new Error(
-                m(`Missing \x1b[31mname\x1b[0m in "./.elsie.cjs".`, 'error')
+                m(`Missing \x1b[31mname\x1b[0m in "./.elsie.cjs".`, 'error'),
               );
             }
 
@@ -176,10 +176,10 @@ module.exports = function generateResourceBuilder(yargs) {
                   .map((e) =>
                     m(
                       `Invalid \x1b[31mcomponents[${group.id}].${e}\x1b[0m value "${group[e]}" in "./.elsie.cjs".`,
-                      'error'
-                    )
+                      'error',
+                    ),
                   )
-                  .join('\n')
+                  .join('\n'),
               );
             }
 
@@ -188,17 +188,17 @@ module.exports = function generateResourceBuilder(yargs) {
               throw new Error(
                 m(
                   `\x1b[4m${basename}\x1b[0m is not a valid component name. Try naming your component with pascal case. i.e. \x1b[4m${toPascalCase(
-                    basename
+                    basename,
                   )}\x1b[0m`,
-                  'error'
-                )
+                  'error',
+                ),
               );
             }
 
             return true;
           }, false);
       },
-      require('./component')
+      require('./component'),
     )
 
     // New Container
@@ -224,8 +224,8 @@ module.exports = function generateResourceBuilder(yargs) {
               throw new Error(
                 m(
                   'Configuration file ".elsie.cjs" not found. Make sure you are in the root directory of your project or generate a new one.',
-                  'error'
-                )
+                  'error',
+                ),
               );
             }
 
@@ -233,14 +233,14 @@ module.exports = function generateResourceBuilder(yargs) {
               throw new Error(
                 m(
                   `Missing \x1b[31mcontainers\x1b[0m in "./.elsie.cjs".`,
-                  'error'
-                )
+                  'error',
+                ),
               );
             }
 
             if (!config.name) {
               throw new Error(
-                m(`Missing \x1b[31mname\x1b[0m in "./.elsie.cjs".`, 'error')
+                m(`Missing \x1b[31mname\x1b[0m in "./.elsie.cjs".`, 'error'),
               );
             }
 
@@ -259,10 +259,10 @@ module.exports = function generateResourceBuilder(yargs) {
                   .map((e) =>
                     m(
                       `Invalid \x1b[31mcontainers.${e}\x1b[0m value "${config.containers[e]}" in "./.elsie.cjs".`,
-                      'error'
-                    )
+                      'error',
+                    ),
                   )
-                  .join('\n')
+                  .join('\n'),
               );
             }
 
@@ -271,17 +271,17 @@ module.exports = function generateResourceBuilder(yargs) {
               throw new Error(
                 m(
                   `\x1b[4m${basename}\x1b[0m is not a valid container name. Try naming your container with pascal case. i.e. \x1b[4m${toPascalCase(
-                    basename
+                    basename,
                   )}\x1b[0m`,
-                  'error'
-                )
+                  'error',
+                ),
               );
             }
 
             return true;
           }, false);
       },
-      require('./container')
+      require('./container'),
     )
 
     //

package/bin/builders/gql/index.js

@@ -29,7 +29,7 @@ module.exports = async function generateResourceBuilder(yargs) {
               },
           },
         },
-        true
+        true,
       );
     })
     .command('mocks', 'Generate mocks and types', async () => {
@@ -69,33 +69,33 @@ module.exports = async function generateResourceBuilder(yargs) {
       });
     })
     .command(
-        'validate',
-        'Validate GraphQL operations',
-        async (yargs) => {
-            return yargs
-                .option('source', {
-                    alias: 's',
-                    describe: 'Path to the source code containing GraphQL operations',
-                    type: 'array',
-                    demandOption: true,
-                })
-                .option('excluded', {
-                    alias: 'x',
-                    describe: 'Paths to exclude from validation',
-                    type: 'array',
-                    demandOption: false,
-                })
-                .option('endpoints', {
-                    alias: 'e',
-                    describe: 'Path to GraphQL endpoints',
-                    type: 'array',
-                    demandOption: true,
-                });
-        },
-        async (argv) => {
-            const { source, excluded, endpoints } = argv;
-            await validate(source, endpoints, excluded);
-        },
+      'validate',
+      'Validate GraphQL operations',
+      async (yargs) => {
+        return yargs
+          .option('source', {
+            alias: 's',
+            describe: 'Path to the source code containing GraphQL operations',
+            type: 'array',
+            demandOption: true,
+          })
+          .option('excluded', {
+            alias: 'x',
+            describe: 'Paths to exclude from validation',
+            type: 'array',
+            demandOption: false,
+          })
+          .option('endpoints', {
+            alias: 'e',
+            describe: 'Path to GraphQL endpoints',
+            type: 'array',
+            demandOption: true,
+          });
+      },
+      async (argv) => {
+        const { source, excluded, endpoints } = argv;
+        await validate(source, endpoints, excluded);
+      },
     )
     .demandCommand(1, 1, 'choose a command: types, mocks or validate');
 };

package/bin/builders/gql/validate.js

@@ -3,134 +3,145 @@ const fsPromises = require('node:fs/promises');
 const path = require('node:path');
 const parser = require('@babel/parser');
 const traverse = require('@babel/traverse');
-const { getIntrospectionQuery, buildClientSchema, parse, validate } = require('graphql');
+const {
+  getIntrospectionQuery,
+  buildClientSchema,
+  parse,
+  validate,
+} = require('graphql');
 
 async function walk(dir, excludedPaths = [], collected = []) {
-    if (excludedPaths.includes(dir)) return collected;
+  if (excludedPaths.includes(dir)) return collected;
 
-    const dirents = await fsPromises.readdir(dir, { withFileTypes: true });
+  const dirents = await fsPromises.readdir(dir, { withFileTypes: true });
 
-    for (const d of dirents) {
-        const full = path.resolve(dir, d.name);
+  for (const d of dirents) {
+    const full = path.resolve(dir, d.name);
 
-        if (d.isDirectory()) {
-            if (excludedPaths.includes(full)) continue;
-            if (d.name === 'node_modules' || d.name.startsWith('.')) continue;
-            await walk(full, excludedPaths, collected);
-        } else if (/\.(c?m?js|ts|tsx)$/.test(d.name)) {
-            if (excludedPaths.includes(full)) continue;
-            collected.push(full);
-        }
+    if (d.isDirectory()) {
+      if (excludedPaths.includes(full)) continue;
+      if (d.name === 'node_modules' || d.name.startsWith('.')) continue;
+      await walk(full, excludedPaths, collected);
+    } else if (/\.(c?m?js|ts|tsx)$/.test(d.name)) {
+      if (excludedPaths.includes(full)) continue;
+      collected.push(full);
     }
-    return collected;
+  }
+  return collected;
 }
 
 function extractConstants(code) {
-    const ast = parser.parse(code, {
-        sourceType: 'unambiguous',
-        plugins: [
-            'typescript',
-            'jsx',
-            'classProperties',
-            'objectRestSpread',
-            'dynamicImport',
-            'optionalChaining',
-            'nullishCoalescingOperator',
-        ],
-    });
-    const found = [];
-    traverse.default(ast, {
-        VariableDeclaration(path) {
-            if (path.node.kind !== 'const') return;
-            for (const decl of path.node.declarations) {
-                const { id, init } = decl;
-                if (!init || id.type !== 'Identifier') continue;
-                let text = null;
-                switch (init.type) {
-                    case 'TemplateLiteral': {
-                        // join all raw chunks; ignores embedded ${expr} for simplicity
-                        text = init.quasis.map(q => q.value.cooked).join('');
-                        break;
-                    }
-                    case 'StringLiteral':
-                        text = init.value;
-                        break;
-                }
-                if (text) {
-                    const match = text.match(/\b(query|mutation|fragment)\b/i);
-                    if (match) {
-                        found.push(text.trim());
-                    }
-                }
-            }
-        },
-    });
+  const ast = parser.parse(code, {
+    sourceType: 'unambiguous',
+    plugins: [
+      'typescript',
+      'jsx',
+      'classProperties',
+      'objectRestSpread',
+      'dynamicImport',
+      'optionalChaining',
+      'nullishCoalescingOperator',
+    ],
+  });
+  const found = [];
+  traverse.default(ast, {
+    VariableDeclaration(path) {
+      if (path.node.kind !== 'const') return;
+      for (const decl of path.node.declarations) {
+        const { id, init } = decl;
+        if (!init || id.type !== 'Identifier') continue;
+        let text = null;
+        switch (init.type) {
+          case 'TemplateLiteral': {
+            // join all raw chunks; ignores embedded ${expr} for simplicity
+            text = init.quasis.map((q) => q.value.cooked).join('');
+            break;
+          }
+          case 'StringLiteral':
+            text = init.value;
+            break;
+        }
+        if (text) {
+          const match = text.match(/\b(query|mutation|fragment)\b/i);
+          if (match) {
+            found.push(text.trim());
+          }
+        }
+      }
+    },
+  });
 
-    return found;
+  return found;
 }
 
 async function fetchSchema(endpoint) {
-    const body = JSON.stringify({ query: getIntrospectionQuery() });
-    const res  = await fetch(endpoint, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body
-    });
-    if (!res.ok) throw new Error(`Introspection query failed: ${res.statusText}`);
-    const { data, errors } = await res.json();
-    if (errors?.length) throw new Error(`Server returned errors: ${JSON.stringify(errors)}`);
-    return buildClientSchema(data);
+  const body = JSON.stringify({ query: getIntrospectionQuery() });
+  const res = await fetch(endpoint, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body,
+  });
+  if (!res.ok) throw new Error(`Introspection query failed: ${res.statusText}`);
+  const { data, errors } = await res.json();
+  if (errors?.length)
+    throw new Error(`Server returned errors: ${JSON.stringify(errors)}`);
+  return buildClientSchema(data);
 }
 
 async function validateGqlOperations(endpoint, operation) {
-    console.log(`\nValidating against endpoint: ${endpoint}`);
-    try {
-        const document = parse(operation);
-        const errors = validate(await fetchSchema(endpoint), document);
-        if (errors.length) {
-            console.error('❌  Operation is NOT valid for this schema:');
-            errors.forEach(e => console.error('-', e.message));
-            process.exitCode = 1;
-        } else {
-            console.log('✅  Operation is valid!');
-        }
-    } catch (e) {
-        console.error(e);
-        process.exitCode = 1;
+  console.log(`\nValidating against endpoint: ${endpoint}`);
+  try {
+    const document = parse(operation);
+    const errors = validate(await fetchSchema(endpoint), document);
+    if (errors.length) {
+      console.error('❌  Operation is NOT valid for this schema:');
+      errors.forEach((e) => console.error('-', e.message));
+      process.exitCode = 1;
+    } else {
+      console.log('✅  Operation is valid!');
     }
+  } catch (e) {
+    console.error(e);
+    process.exitCode = 1;
+  }
 }
 
 async function getAllOperations(directories, excludedPaths = []) {
-    let fullContent = '';
-    for (const directory of directories) {
-        const files = await walk(path.resolve(directory), excludedPaths.map(p => path.resolve(p)));
-        for (const f of files) {
-            const code = await fsPromises.readFile(f, 'utf8');
+  let fullContent = '';
+  for (const directory of directories) {
+    const files = await walk(
+      path.resolve(directory),
+      excludedPaths.map((p) => path.resolve(p)),
+    );
+    for (const f of files) {
+      const code = await fsPromises.readFile(f, 'utf8');
 
-            let extracted;
-            try {
-                extracted = extractConstants(code);      // may throw on bad syntax
-            } catch (err) {
-                console.error(
-                    `⚠️  Skipping ${path.relative(process.cwd(), f)}\n` +
-                    `    ${err.message}`
-                );
-                continue;
-            }
-            fullContent += extracted;
-        }
+      let extracted;
+      try {
+        extracted = extractConstants(code); // may throw on bad syntax
+      } catch (err) {
+        console.error(
+          `⚠️  Skipping ${path.relative(process.cwd(), f)}\n` +
+            `    ${err.message}`,
+        );
+        continue;
+      }
+      fullContent += extracted;
     }
-    return fullContent;
+  }
+  return fullContent;
 }
 
 module.exports = async function main(sources, endpoints, excluded) {
-    for (const endpoint of endpoints) {
-        const operations = await getAllOperations(sources, excluded);
-        if (!operations) {
-            console.error('No GraphQL operations found in the specified directories.');
-            process.exitCode = 0;
-            return;
-        }
-        await validateGqlOperations(endpoint, operations);
+  for (const endpoint of endpoints) {
+    const operations = await getAllOperations(sources, excluded);
+    if (!operations) {
+      console.error(
+        'No GraphQL operations found in the specified directories.',
+      );
+      process.exitCode = 0;
+      return;
     }
-}
+    await validateGqlOperations(endpoint, operations);
+  }
+};

package/bin/builders/lint/index.js

@@ -1,5 +1,5 @@
 const cli = require('../../lib/cli');
 
 module.exports = function generateResourceBuilder() {
-  return cli('eslint "*/**/*.{ts,tsx}"');
+  return cli('eslint', ['*/**/*.{ts,tsx}']);
 };

package/bin/builders/serve/index.js

@@ -24,7 +24,7 @@ module.exports = async function generateResourceBuilder({ argv }) {
               path.resolve(process.cwd(), './dist/reload'),
               JSON.stringify({
                 at: Date.now(),
-              })
+              }),
             );
 
             console.log('\n📦 Dropin assets built\n');