Added in a check on script tags in theme app extensions to make sure importmap is not being used

Author: AribaRajput

.changeset/chilled-bugs-juggle.md

@@ -0,0 +1,5 @@
+---
+'@shopify/theme-check-common': minor
+---
+
+This theme check will check for and suggest removing script tags with type importmap on theme app extensions

.changeset/yellow-insects-draw.md

@@ -45,7 +45,7 @@ import { ValidSchemaName } from './valid-schema-name';
 import { ValidStaticBlockType } from './valid-static-block-type';
 import { VariableName } from './variable-name';
 import { MissingSchema } from './missing-schema';
-import { ValidBlockPresetSettings } from './valid-block-preset-settings';
+import { NoImportmap } from './no-import-map';
 
 export const allChecks: (LiquidCheckDefinition | JSONCheckDefinition)[] = [
   AppBlockValidTags,
@@ -93,7 +93,7 @@ export const allChecks: (LiquidCheckDefinition | JSONCheckDefinition)[] = [
   ValidStaticBlockType,
   VariableName,
   ValidSchemaName,
-  ValidBlockPresetSettings,
+  NoImportmap,
 ];
 
 /**

packages/theme-check-common/src/checks/index.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import { NoImportmap } from '.';
+import { check as reportOffenses } from '../../test';
+
+describe('Module: NoImportmap', () => {
+  it('should report offense when using <script type="importmap">', async () => {
+    const file = `<script type="importmap">
+    {
+      "imports": {
+        "a.js": "https://foo.bar/baz.js"
+      }
+    }
+    </script>`;
+    const startIndex = file.indexOf('<script');
+    const endIndex = file.indexOf('</script>') + '</script>'.length;
+
+    const offenses = await reportOffenses({ 'code.liquid': file }, [NoImportMap]);
+
+    expect(offenses).to.have.length(1);
+    const { message, start, end } = offenses[0];
+
+    expect(message).toEqual(
+      'Until browsers permit multiple importmap entries, only themes can have an importmap',
+    );
+    expect(start.index).toEqual(startIndex);
+    expect(end.index).toEqual(endIndex);
+
+    expect(offenses[0].suggest).to.have.length(1);
+    expect(offenses[0]!.suggest![0].message).to.equal("Remove the 'importmap' script tag");
+  });
+});

packages/theme-check-common/src/checks/no-import-map/index.spec.ts

@@ -0,0 +1,54 @@
+import { ConfigTarget, LiquidCheckDefinition, Severity, SourceCodeType } from '../../types';
+
+import { hasAttributeValueOf, isAttr, isValuedHtmlAttribute } from '../utils';
+
+export const NoImportmap: LiquidCheckDefinition = {
+  meta: {
+    code: 'NoImportmap',
+    name: 'Import map in theme app extensions',
+    docs: {
+      description:
+        'Report offenses associated with import maps on script tags in theme app extensions',
+      url: 'https://shopify.dev/docs/storefronts/themes/tools/theme-check/checks/no-import-map',
+    },
+    type: SourceCodeType.LiquidHtml,
+    severity: Severity.ERROR,
+    schema: {},
+    targets: [ConfigTarget.ThemeAppExtension],
+  },
+
+  create(context) {
+    return {
+      async HtmlRawNode(node) {
+        if (node.name !== 'script') {
+          return;
+        }
+
+        const typeImportMap = node.attributes
+          .filter(isValuedHtmlAttribute)
+          .some((attr) => isAttr(attr, 'type') && hasAttributeValueOf(attr, 'importmap'));
+
+        const typeModule = node.attributes
+          .filter(isValuedHtmlAttribute)
+          .some((attr) => isAttr(attr, 'type') && hasAttributeValueOf(attr, 'importmap'));
+
+        if (!typeImportMap || !typeModule) {
+          return;
+        }
+
+        context.report({
+          message:
+            'Until browsers permit multiple importmap entries, only themes can have an importmap',
+          startIndex: node.position.start,
+          endIndex: node.position.end,
+          suggest: [
+            {
+              message: `Remove the 'importmap' script tag`,
+              fix: (corrector) => corrector.remove(node.position.start, node.position.end),
+            },
+          ],
+        });
+      },
+    };
+  },
+};