[Feature]: Add support for JSON file format in assets in theme app extensions

[blanklob]

What area(s) will this request affect?

Extension

What type of change do you want to see?

New feature

Overview

Currently, we are able to develop theme app extensions with JSON files inside Assets folder in theme app extensions. However, when attempting to deploy the theme app extension via the CLI deploy command, an error is thrown due to unsupported file extensions. Even after forking the project and attempting to ignore the error and add support, the error persists.

Here is the error:

There has been an error creating your deployment.                           │
│                                                                              │
│  copilot-ui                                                                  │
│                                                                              │
│  Validation errors                                                           │
│    • bundle: assets directory should only contain .jpg, .jpeg, .js, .css,    │
│      .png, .svg files   

Motivation

I am trying to build a theme app extension that requires a JSON file as an asset, similar to how we currently use them in themes.

[alvaro-shopify]

Hi @blanklob !. Thanks for rising up this issue. I will ping my partners from @Shopify/theme-code-tools thus they can help you with this.

[karreiro]

Hi @blanklob,

Thank you for bringing this up. I strongly agree that theme app extensions should also support JSON assets. However, this requires some changes at the platform level, as it is not limited to the Shopify CLI.

I have contacted folks responsible for theme app extensions, and they also agree. Once this feature is available on the platform, I will implement the necessary changes at the CLI level and leave a heads-up here.

Thank you again for raising this issue!

[blanklob]

Thanks understood. Keep me updated.

[maruffahmed]

I think the CLI should also be allowed liquid file in the assets folder. Sometimes we are required to use css/js files as .css/.js.liquid format. Shopify allows that but the CLI theme app extension deploy command is throwing an error like below:

Validation errors                                                           
• bundle: assets directory should only contain .jpg, .jpeg, .js, .css, .png, .svg files

[varun-batta]

Related to this, I'm curious, if we need to add this type of input setting to our theme app extension (https://shopify.dev/docs/themes/architecture/settings/input-settings#color_scheme_group), how do we do so?

Adding it in the settings array directly, as follows:

{
      "type": "color_scheme_group",
      "id": "id",
      "definition": [
        {
          "type": "color",
          "id": "text",
          "label": "Text Color",
          "default": "#ffffff"
        },
        {
          "type": "color",
          "id": "background",
          "label": "Background Color",
          "default": "#475572"
        }
      ],
      "role": {
        "text": "text",
        "background": "background"
      }
    },

is leading to errors:

Validation errors                                                           │
│    • bundle: [blocks/template.liquid] Invalid tag 'schema': settings:    │
│      with id="id" is invalid,                      │
│      [blocks/template.liquid] Invalid tag 'schema': settings: with       │
│      id="id" is invalid

The docs say: Color schemes can be added only in settings_schema.json. - not sure if that means that this setting goes into a .json which we can't upload? If I'm doing something wrong, would love some help

[alexandrosk]

I also want this functionality, please add it on the roadmap

[thosakwe]

.wasm files should also be allowed.

[lukeh-shopify]

👋🏻 Hi @blanklob, thank you for the request! The change to allow JSON files in Theme App Extension assets directories has been merged and should be available in the next minor release (3.60).

---

I think the CLI should also be allowed liquid file in the assets folder.

@maruffahmed Unfortunately we don't have plans to support .liquid assets, because we mention that they should only have one css/js.liquid per theme. Allowing .liquid files in the Theme App Extensions directory would imply having many .liquid assets per theme.

---

.wasm files should also be allowed.

@thosakwe If .wasm files are something you would still like supported, would you mind opening a separate issue? Thank you!

---

not sure if that means that this setting goes into a .json which we can't upload? If I'm doing something wrong, would love some help

@varun-batta If this is something you're still having trouble with after this feature is released, would you mind opening a separate issue for better tracking of your question? Thank you

[thosakwe]

@lukeh-shopify Thanks for the heads up; I've now created a thread for WASM: #3893

[blanklob]

@lukeh-shopify one year later lol

[tentree-development]

slick library comes with .gif file can you also add support for gif file