[FEAT] Shopify CLI to replace theme kit

[qedric]

Is your feature request related to a problem? Please describe. We cannot use Shopify Packer on shopify 2.0 themes, as the themekit dependancy does not recognise the new JSON templates

Describe the solution you'd like Please themekit with Shopify CLI or create the choice to use one or the other

Additional context

Shopify guide on migrating themes to support Shopify 2.0 templates: https://shopify.dev/themes/migration#before-you-start

[GuillermoCasanova]

Second this! Would be a huge step up and avoid having other tools to be created. Having Shopify CLI / Dawn being part of the dev and build process would be ace.

[qedric]

Right now I'm making do - I have one custom theme migrated to Shopify 2.0 and I've found that once the json templates are deployed, everything else keeps working just fine. But I think swapping out theme kit with CLI would solve the issue of having to manually manage json template deployments

[GuillermoCasanova]

ohh really? That's good to hear.

So are you running packer/dev/deployment as per usual, and then manually uploading the JSON templates to the theme?

Are you still running it with SCSS and then compiling into a single CSS file or using Dawn's method of a css sheet pet section?

[qedric]

Yes, running packer start/watch, build, etc., as normal but manually deploying the json files. I'm still running scss using packer to compile into the various css files per template entry-point.

[qedric]

Quick update - @hayes0724 this is my working but cumbersome deployment process:

1. run the packer build command
2. go to the dist folder and edit the style-tags and script-tags snippets, replacing instances of {% if template == '[name of template]' with {% if template.name == '[name of template]'
3. manually copy any changes to templates to target theme - preserving settings where possible
4. create a themekit ignores file to ignore all json files
5. copy the config.yml and ignores file into the root of the dist folder
6. run theme deploy --env=[env name]

Can you offer any guidane or roadmap for shopify 2.0 support?

[Eben-Hafkamp]

I have had no issues working with Shopify 2.0 json templates. My version of ThemeKit is 1.1.9. The Shopify CLI theme watch command has its own development server and would be incompatible with this library. It also does not support hot module reloads as readily as Packer, overall I've found their theme cli tool to be really sluggish and a bad alternative at the time of writing. Remember that this library is a stable version of Slate 1.0, which was also created by Shopify. The build tool path empowers the developer to be creative whereas the cli/dawn combo pushes uniformity.

[adrianocr]

Themekit has a JS package that Packer uses to run themekit in the background and interact with Shopify themes directly. The new Shopify CLI is a ruby-based tool that does NOT have a JS package that Packer could use.

Anyway using Shopify CLI isn't even necessary. Themekit is still perfectly capable of interacting with the new JSON templates. Packer just needs to be updated to recognize those templates rather than simply .liquid files. Right now Packer loops through the /src/templates directory and matches up any .liquid files with their counterparts in /src/scripts/templates. If Packer were updated to do the same but while also matching .json templates, the entire issue would be resolved.

[Eben-Hafkamp]

@adrianocr 2.0 allows the merchant to create offshoot templates which is kind of the core functionality of 2.0 and "sections everywhere". The offshoot files are named by the merchant. Have you thought of a solution for how a js entry point for the original could also apply to its extensions/offshoots?

[adrianocr]

@Eben-Hafkamp unfortunately I don’t believe there’s a way to automatically deal with that. I don’t believe Shopify CLI deals with it automatically either. The process would be manual; you’d have to manually pull down the offshoot json template into your local files and then manually create a counterpart js entrypoint (if necessary).

[Eben-Hafkamp]

@adrianocr Yea that is a shame as usually only the content or the arrangement of content is changed in "sections everywhere" and the dynamics or the javascript of the page stay the same. Hmm it sure is a head scratcher, I wish Shopify had created just a small identifier for where templates are descendent from, could have been useful in more ways than one.

Correct the CLI does not work in the same way. The GitHub integration is used to have the Shopify bot push the new template files into the associated theme branch's source. I prefer to run the Shopify CLI pull command and avoid the integration which is a bit spammy at the time of writing.