barrel / shopify-vite

Modern frontend tooling for Shopify theme development using Vite for a best-in-class DX.
https://shopify-vite.barrelny.com/
MIT License
293 stars 45 forks source link

Version numbers option #99

Closed montalvomiguelo closed 1 year ago

montalvomiguelo commented 1 year ago

Followup to #96

This PR adds the versionNumbers option to the Shopify Vite Plugin.

It's a boolean option whose default value is false, so the snippetFile can load the hashed assets Vite generates out of the box, stripping out the version numbers the asset_url appends to asset URLs.

_It's false by default to avoid downloading modules twice when using ESM imports #21 (module specifiers don't know the version numbers generated by the asset_url filter)._


The versionNumbers option will allow theme developers to enable the version numbers the asset_url filter generates for asset URLs and configure Vite to output non-hashed assets.

Theme developers should be able to use the vite-plugin-shopify-import-maps Plugin by @slavamak to map module specifiers to asset URLs with version numbers generated by the asset_url filter.

JavaScript import maps are now supported cross-browser, and they are compliant with the Theme store requirements.

Using vite-plugin-shopify + vite-plugin-shopify-import-maps will result in better integration with the native caching functionalities of the Shopify Platform.

_Demo https://shop.montalvomiguelo.com/collections/all/?preview_theme_id=132745035947_

netlify[bot] commented 1 year ago

Deploy Preview for bespoke-flan-5eacfc ready!

Name Link
Latest commit d80dba79bc23a1a45af3f8448bee2cc56d234b3f
Latest deploy log https://app.netlify.com/sites/bespoke-flan-5eacfc/deploys/650f9c4222759f00084cc190
Deploy Preview https://deploy-preview-99--bespoke-flan-5eacfc.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

jonathanmoore commented 1 year ago

Fantastic work @slavamak and @montalvomiguelo! This will be incredibly helpful.