shopify-theme-devtools 1.0.0 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shopify-theme-devtools",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "In-browser devtools panel for Shopify theme development - inspect Liquid context, metafields, settings, sections, and cart state",
   "type": "module",
   "main": "dist/theme-devtools.js",
@@ -38,11 +38,11 @@
     "shopify-development",
     "theme-development"
   ],
-  "author": "",
+  "author": "yakohere",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": ""
+    "url": "https://github.com/yakohere/shopify-theme-devtools"
   },
   "bugs": {
     "url": ""

package/src/liquid/theme-devtools-bridge.liquid

@@ -1,23 +1,71 @@
 {%- comment -%}
   Theme Devtools Bridge
   Renders devtools context and loads JS/CSS only on development/preview themes.
-  
+
   Usage: {% render 'theme-devtools-bridge' %}
-  
+
   Development: Set devtools_local to true and run `npm run dev`
   Production:  Set devtools_local to false and update devtools_cdn_base
-  
-  Metafields: Add your custom namespaces to devtools_metafield_namespaces below
+
+  Metafields Schema: Copy content from your theme's metafields.json into devtools_metafields_schema below
 {%- endcomment -%}
 
 {%- assign devtools_local = true -%}
 {%- assign devtools_localhost = 'http://localhost:9999' -%}
-{%- assign devtools_cdn_base = 'https://cdn.example.com/theme-devtools/v1.0.0' -%}
+{%- assign devtools_cdn_base = 'https://cdn.jsdelivr.net/npm/shopify-theme-devtools@latest/dist' -%}
 
-{%- comment -%} Configure your metafield namespaces here {%- endcomment -%}
-{%- assign devtools_metafield_namespaces = 'custom,global,my_fields,shopify,descriptors' | split: ',' -%}
+{%- comment -%} 
+  Metafields Schema: Paste your theme's metafields.json content here.
+  This file is auto-generated by Shopify and located at the root of your theme.
+  Having this schema enables the devtools to show ALL defined metafields,
+  not just ones with values.
+{%- endcomment -%}
+{%- capture devtools_metafields_schema -%}
+{
+  "article": [],
+  "blog": [],
+  "collection": [],
+  "company": [],
+  "company_location": [],
+  "location": [],
+  "market": [],
+  "order": [],
+  "page": [],
+  "product": [],
+  "variant": [],
+  "shop": [],
+  "customer": []
+}
+{%- endcapture -%}
 
 {%- comment -%} 
+  Auto-extract namespaces from schema, or use fallback list if schema is empty
+{%- endcomment -%}
+{%- assign devtools_extracted_namespaces = '' -%}
+{%- assign devtools_schema_parts = devtools_metafields_schema | split: '"namespace": "' -%}
+{%- for part in devtools_schema_parts -%}
+  {%- unless forloop.first -%}
+    {%- assign ns_end = part | split: '"' | first -%}
+    {%- if ns_end != blank -%}
+      {%- unless devtools_extracted_namespaces contains ns_end -%}
+        {%- if devtools_extracted_namespaces == '' -%}
+          {%- assign devtools_extracted_namespaces = ns_end -%}
+        {%- else -%}
+          {%- assign devtools_extracted_namespaces = devtools_extracted_namespaces | append: ',' | append: ns_end -%}
+        {%- endif -%}
+      {%- endunless -%}
+    {%- endif -%}
+  {%- endunless -%}
+{%- endfor -%}
+
+{%- comment -%} Use extracted namespaces if found, otherwise use fallback {%- endcomment -%}
+{%- if devtools_extracted_namespaces != '' -%}
+  {%- assign devtools_metafield_namespaces = devtools_extracted_namespaces | split: ',' -%}
+{%- else -%}
+  {%- assign devtools_metafield_namespaces = 'custom,global,shopify' | split: ',' -%}
+{%- endif -%}
+
+{%- comment -%}
   Configure your theme settings to expose here.
   Format: setting_id|type|label|group
   Common types: color, text, checkbox, number, range, select, image_picker, font_picker
@@ -246,14 +294,22 @@ checkout_logo|image_picker|Checkout logo|checkout
         {%- else -%}
         "page": null,
         {%- endif -%}
-        "cart": {{ cart | json }}
+        "cart": {
+          "item_count": {{ cart.item_count | json }},
+          "total_price": {{ cart.total_price | json }},
+          "currency": {{ cart.currency.iso_code | json }},
+          "items_count": {{ cart.items | size | json }},
+          "_note": "Full cart data fetched via /cart.js"
+        }
       },
       "metafields": {
         {%- comment -%} Shop Metafields {%- endcomment -%}
         "shop": {
+          {%- assign mf_first = true -%}
           {%- for ns in devtools_metafield_namespaces -%}
             {%- assign shop_ns = shop.metafields[ns] -%}
             {%- if shop_ns != blank -%}
+              {%- unless mf_first -%},{%- endunless -%}{%- assign mf_first = false -%}
               "{{ ns }}": {
                 {%- for field in shop_ns -%}
                   "{{ field.first }}": {
@@ -261,16 +317,18 @@ checkout_logo|image_picker|Checkout logo|checkout
                     "type": {{ field.last.type | json }}
                   }{%- unless forloop.last -%},{%- endunless -%}
                 {%- endfor -%}
-              }{%- unless forloop.last -%},{%- endunless -%}
+              }
             {%- endif -%}
           {%- endfor -%}
         },
         {%- comment -%} Product Metafields {%- endcomment -%}
         {%- if product -%}
         "product": {
+          {%- assign mf_first = true -%}
           {%- for ns in devtools_metafield_namespaces -%}
             {%- assign product_ns = product.metafields[ns] -%}
             {%- if product_ns != blank -%}
+              {%- unless mf_first -%},{%- endunless -%}{%- assign mf_first = false -%}
               "{{ ns }}": {
                 {%- for field in product_ns -%}
                   "{{ field.first }}": {
@@ -278,7 +336,7 @@ checkout_logo|image_picker|Checkout logo|checkout
                     "type": {{ field.last.type | json }}
                   }{%- unless forloop.last -%},{%- endunless -%}
                 {%- endfor -%}
-              }{%- unless forloop.last -%},{%- endunless -%}
+              }
             {%- endif -%}
           {%- endfor -%}
         },
@@ -288,9 +346,11 @@ checkout_logo|image_picker|Checkout logo|checkout
         {%- comment -%} Collection Metafields {%- endcomment -%}
         {%- if collection -%}
         "collection": {
+          {%- assign mf_first = true -%}
           {%- for ns in devtools_metafield_namespaces -%}
             {%- assign collection_ns = collection.metafields[ns] -%}
             {%- if collection_ns != blank -%}
+              {%- unless mf_first -%},{%- endunless -%}{%- assign mf_first = false -%}
               "{{ ns }}": {
                 {%- for field in collection_ns -%}
                   "{{ field.first }}": {
@@ -298,7 +358,7 @@ checkout_logo|image_picker|Checkout logo|checkout
                     "type": {{ field.last.type | json }}
                   }{%- unless forloop.last -%},{%- endunless -%}
                 {%- endfor -%}
-              }{%- unless forloop.last -%},{%- endunless -%}
+              }
             {%- endif -%}
           {%- endfor -%}
         },
@@ -308,9 +368,11 @@ checkout_logo|image_picker|Checkout logo|checkout
         {%- comment -%} Customer Metafields {%- endcomment -%}
         {%- if customer -%}
         "customer": {
+          {%- assign mf_first = true -%}
           {%- for ns in devtools_metafield_namespaces -%}
             {%- assign customer_ns = customer.metafields[ns] -%}
             {%- if customer_ns != blank -%}
+              {%- unless mf_first -%},{%- endunless -%}{%- assign mf_first = false -%}
               "{{ ns }}": {
                 {%- for field in customer_ns -%}
                   "{{ field.first }}": {
@@ -318,7 +380,7 @@ checkout_logo|image_picker|Checkout logo|checkout
                     "type": {{ field.last.type | json }}
                   }{%- unless forloop.last -%},{%- endunless -%}
                 {%- endfor -%}
-              }{%- unless forloop.last -%},{%- endunless -%}
+              }
             {%- endif -%}
           {%- endfor -%}
         },
@@ -328,9 +390,11 @@ checkout_logo|image_picker|Checkout logo|checkout
         {%- comment -%} Article Metafields {%- endcomment -%}
         {%- if article -%}
         "article": {
+          {%- assign mf_first = true -%}
           {%- for ns in devtools_metafield_namespaces -%}
             {%- assign article_ns = article.metafields[ns] -%}
             {%- if article_ns != blank -%}
+              {%- unless mf_first -%},{%- endunless -%}{%- assign mf_first = false -%}
               "{{ ns }}": {
                 {%- for field in article_ns -%}
                   "{{ field.first }}": {
@@ -338,7 +402,7 @@ checkout_logo|image_picker|Checkout logo|checkout
                     "type": {{ field.last.type | json }}
                   }{%- unless forloop.last -%},{%- endunless -%}
                 {%- endfor -%}
-              }{%- unless forloop.last -%},{%- endunless -%}
+              }
             {%- endif -%}
           {%- endfor -%}
         },
@@ -348,9 +412,11 @@ checkout_logo|image_picker|Checkout logo|checkout
         {%- comment -%} Page Metafields {%- endcomment -%}
         {%- if page -%}
         "page": {
+          {%- assign mf_first = true -%}
           {%- for ns in devtools_metafield_namespaces -%}
             {%- assign page_ns = page.metafields[ns] -%}
             {%- if page_ns != blank -%}
+              {%- unless mf_first -%},{%- endunless -%}{%- assign mf_first = false -%}
               "{{ ns }}": {
                 {%- for field in page_ns -%}
                   "{{ field.first }}": {
@@ -358,7 +424,7 @@ checkout_logo|image_picker|Checkout logo|checkout
                     "type": {{ field.last.type | json }}
                   }{%- unless forloop.last -%},{%- endunless -%}
                 {%- endfor -%}
-              }{%- unless forloop.last -%},{%- endunless -%}
+              }
             {%- endif -%}
           {%- endfor -%}
         },
@@ -368,9 +434,11 @@ checkout_logo|image_picker|Checkout logo|checkout
         {%- comment -%} Blog Metafields {%- endcomment -%}
         {%- if blog -%}
         "blog": {
+          {%- assign mf_first = true -%}
           {%- for ns in devtools_metafield_namespaces -%}
             {%- assign blog_ns = blog.metafields[ns] -%}
             {%- if blog_ns != blank -%}
+              {%- unless mf_first -%},{%- endunless -%}{%- assign mf_first = false -%}
               "{{ ns }}": {
                 {%- for field in blog_ns -%}
                   "{{ field.first }}": {
@@ -378,7 +446,7 @@ checkout_logo|image_picker|Checkout logo|checkout
                     "type": {{ field.last.type | json }}
                   }{%- unless forloop.last -%},{%- endunless -%}
                 {%- endfor -%}
-              }{%- unless forloop.last -%},{%- endunless -%}
+              }
             {%- endif -%}
           {%- endfor -%}
         }
@@ -423,6 +491,7 @@ checkout_logo|image_picker|Checkout logo|checkout
       "sectionSettings": {
         {%- comment -%} Section settings are injected via JS from data attributes {%- endcomment -%}
       },
+      "metafieldsSchema": {{ devtools_metafields_schema }},
       "timestamp": {{ 'now' | date: '%s' | json }}
     }
   {%- endcapture -%}
@@ -437,9 +506,10 @@ checkout_logo|image_picker|Checkout logo|checkout
   {%- if devtools_local -%}
     <script type="module" src="{{ devtools_localhost }}/src/scripts/main.js"></script>
   {%- else -%}
-    <script>window.__THEME_DEVTOOLS_CSS_URL__ = '{{ devtools_cdn_base }}/theme-devtools.css';</script>
+    <script>
+      window.__THEME_DEVTOOLS_CSS_URL__ = '{{ devtools_cdn_base }}/theme-devtools.css';
+    </script>
     <script src="{{ devtools_cdn_base }}/theme-devtools.js" defer></script>
   {%- endif -%}
   {% comment %} theme-check-enable RemoteAsset {% endcomment %}
 {%- endif -%}
-