Reduce code duplication across projects with Web Components

[t-kelly]

The Shopify themes team has the problem of maintaining 10+ different free themes all with their own unique codebase. Whenever we need to apply an update to our themes, we need to 10+ times. Even worse, each update needs to be customized to each theme because themes development has changed over the past 4 years that they've all been created.

What if teams could develop and share self-incapsulated components that could be configured and used if a variety of themes. So instead of maintaining 10+ different implementations of a hero slider, we only need to maintain 1 implementation.

Essentially what we need are Web Components.

Random Idea 1

One idea to get started is to combine {% import %} tags and WebPack to take advantage of sharing snippets (components) through NPM:

<!-- /sections/hello-world.liquid -->
<div id="{{ section.id }}">
  {% import '@ShopifyComponents/hello`, 
     name: section.settings.name, 
     color: section.settings.color 
   %}
</div>

<!-- /node_modules/@ShopifyComponents/hello/hello.liquid -->
<h1>Hello, {{ name }}!</h1>

<style>
h1 {
  color: {{ color }}
}
</style>

WebPack could parse {% import %} tags URL, copy the files referenced to the /snippets directory, and change the {% import %} URL to reference the newly created snippet. Eg:

{% import '@ShopifyComponents/hello` %}

would be compiled to

{% import 'hello` %}

So far this is only a partial implementation of something that kind of resembles Web Components. Would love to hear from the community on any ideas how to approach this problem!

[taivu]

this idea sounds and feels like Pattern Lab (https://patternlab.io/).

Drupal uses Twig, which looks similar to Liquid. When I worked with it, i did things like the code examples you shared, like:

{% include @scope/thing %}

where @scope gets mapped to a specific folder. Maybe theres some concepts from Pattern Lab that could influence or inspire some solutions to Shopify Theming.

edit: https://github.com/EvanLovely/plugin-twig-namespaces name spaces is what does the scope thing live above examples.