shopify_theme_builder 0.4.0 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 96de2b7ebf1688b16c967eb0a10fc193b0ba49064f0612a2a8ae7b73d8ff5ca4
-  data.tar.gz: e8db2e1b3643c1f2b479a4e87c03c00e1c2c8e3354ec7914dca566eabab82746
+  metadata.gz: 7d2c29efc227a315501fc0e21d47b8cb268f8cbd7da2887754321e4ae02914b2
+  data.tar.gz: 51abf4c9808331d461b486325b2a29dc3804d2546befab0ab523530370f471d3
 SHA512:
-  metadata.gz: 1bbc6a322bd5a4bb4156e5692c49fa7358b962da211453289a9e9ad7bb419d76b0e28508b4fa41ec6f6eb662436d3b79c16d4e5a6a2ae46d130cb79b9faae1b4
-  data.tar.gz: ce8c3198cc5d190ca41d7e1e46f69a3c59fa3649735d74c11bcc42c37eefb950723484453e6fd909785273323c257cab39711eafbb4a5bec9da3e19d47be3ec1
+  metadata.gz: 06e8ea516c5e0fa0ea36769a21d7c4cfcfbd5c5cbd4c4cf1c62c60707e041e645e00a7e45fcbcdea0fb993f1eef34008682901934a9f6a62299084394ba252d0
+  data.tar.gz: 1df921934a3ba4cca6f783a4409e4480cba8adaba7363503a6fbec0faf528007f86e8a02a52ccf039f3992942f6766c0f8fd573ea5a81e6625e4d939fd3f3dd6

data/README.md

@@ -84,6 +84,14 @@ Install the gem and add to the application's Gemfile by executing:
 bundle add shopify_theme_builder --group "development"
 ```
 
+Run the gem's install command:
+
+```bash
+bundle exec theme-builder install
+```
+
+This will inject Tailwind CSS and Stimulus JS into your Shopify theme layout, and add an entry in the `Procfile.dev` to run the watcher if present.
+
 ## Usage
 
 To watch for changes in the default components folder and build the theme, run:
@@ -105,19 +113,23 @@ If you need help with all available options, or how to set them, run:
 bundle exec theme-builder help watch
 ```
 
-## After Running the Watcher
+### Component generator
 
-The watcher will create a CSS file that can be included in your Shopify theme layout in this way:
+This gem also provides a command to generate a new component with all the necessary files. To create a new component, run:
 
-```liquid
-{{ 'tailwind-output.css' | asset_url | stylesheet_tag }}
+```bash
+bundle exec theme-builder generate
 ```
 
-And a JavaScript file that can be included in your Shopify theme layout in this way:
+You can customize the component type, name and folder by providing additional options:
+- `--type`: Specify the component type (`section`, `block`, or `snippet`).
+- `--name`: Specify the component name.
+- `--folder`: Specify the components folder (default is `_components`).
 
-```liquid
-<script type="module" src="{{ 'controllers.js' | asset_url }}"></script>
-```
+## Tested With
+
+- [Skeleton Theme](https://github.com/Shopify/skeleton-theme)
+- [Horizon Theme](https://github.com/Shopify/horizon)
 
 ## Development
 
@@ -129,8 +141,9 @@ To install this gem onto your local machine, run `bundle exec rake install`. To
 
 - [x] Run the tailwind build process automatically.
 - [x] Add Stimulus JS support.
-- [ ] Create a command to build an example component with all the files.
-- [ ] Decompile existing Shopify files into components structure (?).
+- [x] Create a command to build an example component with all the files.
+- [ ] Investigate if it's possible to use import maps instead of a single file for Stimulus controllers.
+- [ ] Decompile existing Shopify files into components structure (Is it really needed?).
 
 ## Contributing
 

data/generators/%type%.liquid.tt

@@ -0,0 +1,3 @@
+<div data-controller="<%= name.parameterize %>">
+  <h1><%= name %> <%= type %></h1>
+</div>

data/generators/comment.txt

@@ -0,0 +1 @@
+this is a comment

data/generators/controller.js.tt

@@ -0,0 +1,5 @@
+Stimulus.register("<%= name.parameterize %>", class extends Controller {
+  connect() {
+    console.log("Hello, Stimulus!", this.element)
+  }
+})

data/generators/doc.txt.tt

@@ -0,0 +1,7 @@
+<%= name %> snippet
+
+@param {string} foo - A string value.
+@param {string} [bar] - An optional string value.
+
+@example
+{% render '<%= name.parameterize %>', foo: 'Hello', bar: 'World' %}

data/generators/index.js.tt

@@ -0,0 +1 @@
+console.log("Hello from the <%= name %> <%= type %>")

data/generators/schema.json.tt

@@ -0,0 +1,33 @@
+{
+  "name": "<%= name %>",
+  "tag": "<%= type == "section" ? "section" : "div" %>",
+  "class": "<%= name.parameterize %>",
+  "limit": 1,
+  "settings": [
+    {
+      "type": "text",
+      "id": "title",
+      "label": "Title"
+    }
+  ],
+  "max_blocks": 5,
+  "blocks": [{ "type": "@theme" }, { "type": "@app" }],
+  "presets": [
+    {
+      "name": "<%= name %>",
+      "settings": {
+        "title": "<%= name %>"
+      },
+      "blocks": []
+    }
+  ],
+  "locales": {
+    "en": {
+      "title": "<%= name %>"
+    }
+  },
+  "enabled_on": {
+    "templates": ["*"],
+    "groups": ["*"]
+  }
+}

data/generators/style.css.tt

@@ -0,0 +1,3 @@
+.<%= name.parameterize %> {
+  background-color: red;
+}

data/lib/shopify_theme_builder/builder.rb

@@ -12,8 +12,8 @@ module ShopifyThemeBuilder
     def build
       puts "Processing #{@files_to_process.count} files..."
 
-      @files_to_process.each do |file|
-        @processed_files << ShopifyThemeBuilder::LiquidProcessor.new(file).process
+      @files_to_process.each do |file, event|
+        @processed_files << ShopifyThemeBuilder::LiquidProcessor.new(file:, event:).process
       end
 
       puts "Built #{@processed_files.count} files." if @processed_files.any?

data/lib/shopify_theme_builder/command_line.rb

@@ -1,10 +1,21 @@
 # frozen_string_literal: true
 
+require "active_support/core_ext/string/inflections"
 require "thor"
 
 module ShopifyThemeBuilder
   # CommandLine class to handle CLI commands using Thor.
   class CommandLine < Thor
+    include Thor::Actions
+
+    SUPPORTED_TYPES = %w[section block snippet].freeze
+
+    attr_reader :type, :name
+
+    def self.source_root
+      File.expand_path("../..", __dir__)
+    end
+
     desc "watch", "Watch for changes in the components folder and build the theme accordingly"
     method_option :folders, type: :array, default: ["_components"], desc: "Folders to watch for changes"
     method_option :tailwind_input_file, type: :string, default: "./assets/tailwind.css", desc: "Tailwind CSS input file"
@@ -22,5 +33,162 @@ module ShopifyThemeBuilder
         stimulus_output_file: options[:stimulus_output_file]
       )
     end
+
+    desc "install", "Set up your Shopify theme with Tailwind CSS, Stimulus JS, and the file watcher"
+    def install
+      add_tailwind_to_theme
+      add_stimulus_to_theme
+      add_watcher_to_procfile
+    end
+
+    desc "generate", "Generate an example component structure"
+    method_option :type, type: :string, desc: "Type of component to generate ('section', 'block' or 'snippet')"
+    method_option :name, type: :string, desc: "Name of the component to generate"
+    method_option :folder, type: :string, desc: "Folder to generate the component in"
+    def generate
+      @type = options[:type]
+      @name = options[:name]
+      folder = options[:folder]
+
+      until ShopifyThemeBuilder::CommandLine::SUPPORTED_TYPES.include?(@type)
+        unless @type.nil?
+          say_error "Error: Unsupported type '#{@type}'.\
+ Supported types are: #{ShopifyThemeBuilder::CommandLine::SUPPORTED_TYPES.join(", ")}"
+        end
+
+        @type = ask(
+          "Enter component type (section, block or snippet):",
+          limited_to: ShopifyThemeBuilder::CommandLine::SUPPORTED_TYPES
+        )
+      end
+
+      @name = ask("Enter component name (E.g., Slideshow):") if @name.nil?
+
+      folder = ask("Enter folder to generate the component in:", default: "_components") if folder.nil?
+
+      directory "generators", "#{folder}/#{@name.parameterize(separator: "_")}", exclude_pattern:
+    end
+
+    private
+
+    def exclude_pattern
+      return "doc.txt" unless @type == "snippet"
+
+      "schema.json"
+    end
+
+    def add_tailwind_to_theme
+      theme_file_path =
+        if File.exist?("snippets/stylesheets.liquid")
+          "snippets/stylesheets.liquid"
+        elsif File.exist?("layout/theme.liquid")
+          "layout/theme.liquid"
+        end
+
+      unless theme_file_path
+        say_error "Error: Could not find a theme file to inject Tailwind CSS.", :red
+        return
+      end
+
+      theme_file = File.read(theme_file_path)
+
+      if theme_file.include?("tailwind-output.css")
+        say "Tailwind CSS already included in #{theme_file_path}. Skipping injection.", :blue
+        return
+      end
+
+      injection_tag = "{{ 'tailwind-output.css' | asset_url | stylesheet_tag }}"
+
+      if theme_file_path == "snippets/stylesheets.liquid"
+        add_tailwind_to_snippet(theme_file_path, theme_file, injection_tag)
+      else
+        add_tailwind_to_layout(theme_file_path, theme_file, injection_tag)
+      end
+    end
+
+    def add_tailwind_to_snippet(theme_file_path, theme_file, injection_tag)
+      File.write(theme_file_path, "#{theme_file.chomp}\n#{injection_tag}\n")
+      say "Injected Tailwind CSS tag into #{theme_file_path}.", :green
+    end
+
+    def add_tailwind_to_layout(theme_file_path, theme_file, injection_tag)
+      stylesheet_tag_regex =
+        /(\{\{\s*['"][^'"]+['"]\s*\|\s*asset_url\s*\|\s*stylesheet_tag(?:\s*:\s*((?!\}\}).)*)?\s*\}\})/
+      if theme_file.match?(stylesheet_tag_regex)
+        updated_content = theme_file.sub(
+          stylesheet_tag_regex,
+          "\\1\n#{injection_tag}"
+        )
+        File.write(theme_file_path, updated_content)
+        say "Injected Tailwind CSS tag into #{theme_file_path}.", :green
+      else
+        say_error "Error: Could not find a way to inject Tailwind CSS. Please manually add the CSS tag.",
+                  :red
+      end
+    end
+
+    def add_stimulus_to_theme
+      theme_file_path =
+        if File.exist?("snippets/scripts.liquid")
+          "snippets/scripts.liquid"
+        elsif File.exist?("layout/theme.liquid")
+          "layout/theme.liquid"
+        end
+
+      unless theme_file_path
+        say_error "Error: Could not find a theme file to inject Stimulus JS.", :red
+        return
+      end
+
+      theme_file = File.read(theme_file_path)
+
+      if theme_file.include?("controllers.js")
+        say "Stimulus JS already included in #{theme_file_path}. Skipping injection.", :blue
+        return
+      end
+
+      injection_tag = "<script type=\"module\" defer=\"defer\" src=\"{{ 'controllers.js' | asset_url }}\"></script>"
+
+      if theme_file_path == "snippets/scripts.liquid"
+        add_stimulus_to_snippet(theme_file_path, theme_file, injection_tag)
+      else
+        add_stimulus_to_layout(theme_file_path, theme_file, injection_tag)
+      end
+    end
+
+    def add_stimulus_to_snippet(theme_file_path, theme_file, injection_tag)
+      File.write(theme_file_path, "#{theme_file.chomp}\n#{injection_tag}\n")
+      say "Injected Stimulus JS tag into #{theme_file_path}.", :green
+    end
+
+    def add_stimulus_to_layout(theme_file_path, theme_file, injection_tag)
+      script_tag_regex = %r{(\s*)</body>}
+      if theme_file.match?(script_tag_regex)
+        updated_content = theme_file.sub(
+          script_tag_regex,
+          "\\1\n#{injection_tag}\n</body>"
+        )
+        File.write(theme_file_path, updated_content)
+        say "Injected Stimulus JS tag into #{theme_file_path}.", :green
+      else
+        say_error "Error: Could not find a way to inject Stimulus JS. Please manually add the JS tag.",
+                  :red
+      end
+    end
+
+    def add_watcher_to_procfile
+      procfile_path = "Procfile.dev"
+      return unless File.exist?(procfile_path)
+
+      procfile_content = File.read(procfile_path)
+
+      if procfile_content.include?("theme-builder watch")
+        say "Watcher command already present in #{procfile_path}. Skipping addition.", :blue
+        return
+      end
+
+      File.write(procfile_path, "#{procfile_content.chomp}\ntheme-builder: bundle exec theme-builder watch\n")
+      say "Added watcher command to #{procfile_path}.", :green
+    end
   end
 end

data/lib/shopify_theme_builder/liquid_processor.rb

@@ -24,17 +24,21 @@ module ShopifyThemeBuilder
       liquid: LIQUID_FILE_TYPES.map { |type| "#{type}.liquid" },
       schema: "schema.json",
       stylesheet: "style.css",
-      javascript: "index.js"
+      javascript: "index.js",
+      stimulus: "controller.js"
     }.freeze
     SUPPORTED_VALUES = SUPPORTED_FILES.values.flatten.freeze
 
-    def initialize(file)
-      @file = file
+    def initialize(file:, event:)
+      @file = file.gsub("#{Dir.pwd}/", "")
+      @event = event
       @contents = +""
       @logger = Logger.new($stdout)
     end
 
     def process
+      return if component_deleted?
+
       return unless processable?
 
       compile_content
@@ -46,9 +50,28 @@ module ShopifyThemeBuilder
 
     private
 
+    # If a liquid file is deleted, we want to delete the compiled file as well,
+    # and skip further processing.
+    def component_deleted?
+      return false unless File.extname(@file) == ".liquid" && @event == :deleted
+
+      file_to_remove = compiled_filename(file_type: File.basename(@file, ".liquid"))
+
+      if File.exist?(file_to_remove)
+        File.delete(file_to_remove)
+        @logger.info "Deleted compiled file: #{file_to_remove}"
+      end
+
+      true
+    end
+
     # Returns true if the file is processable, false otherwise.
     def processable?
-      supported? && correct_liquid_file? && correct_filename?
+      !directory? && supported? && correct_liquid_file? && correct_filename?
+    end
+
+    def directory?
+      File.directory?(@file)
     end
 
     # Checks if the file is in the list of supported files.
@@ -112,7 +135,7 @@ module ShopifyThemeBuilder
 
     # Returns the compiled filename based on the component name and liquid file type.
     # Example: _folder_to_watch/button/section.liquid -> sections/button.liquid
-    def compiled_filename
+    def compiled_filename(file_type: liquid_file_type)
       filename_arr = file_dir.split(File::SEPARATOR) # Split the directory path into an array.
       filename_arr = filename_arr.drop(1) # Remove the base components folder from the path. E.g., _components
       filename_arr -= LIQUID_FILE_TYPES # Remove liquid file types from the path. E.g., section, snippet, block
@@ -121,12 +144,12 @@ module ShopifyThemeBuilder
 
       return nil if filename.empty?
 
-      "#{liquid_file_type}s/#{filename}.liquid"
+      "#{file_type}s/#{filename}.liquid"
     end
 
     # Compiles the content by aggregating various related files.
     def compile_content
-      SUPPORTED_FILES.each_key do |key|
+      SUPPORTED_FILES.except(:stimulus).each_key do |key|
         @contents << formatted_content(key)
       end
     end

data/lib/shopify_theme_builder/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ShopifyThemeBuilder
-  VERSION = "0.4.0"
+  VERSION = "1.0.0"
 end

data/lib/shopify_theme_builder/watcher.rb

@@ -19,6 +19,7 @@ module ShopifyThemeBuilder
       @tailwind_output_file = tailwind_output_file
       @skip_tailwind = skip_tailwind
       @stimulus_output_file = stimulus_output_file
+      @stimulus_controller_file = ShopifyThemeBuilder::LiquidProcessor::SUPPORTED_FILES[:stimulus]
     end
 
     def watch
@@ -49,24 +50,26 @@ module ShopifyThemeBuilder
     def initial_build
       puts "Doing an initial build..."
 
+      files_to_process = {}
+
       @folders_to_watch.each do |folder|
-        Builder.new(files_to_process: Dir.glob("#{folder}/**/*.*")).build
+        Dir.glob("#{folder}/**/*.*").each do |file|
+          files_to_process[file] = :updated
+        end
       end
+
+      Builder.new(files_to_process: files_to_process).build
     end
 
     def watch_folders
       puts "Watching for changes in '#{@folders_to_watch.join(", ")}' folders..."
 
       Filewatcher.new(@folders_to_watch).watch do |changes|
-        changes.each_key do |filename|
-          relative_filename = filename.gsub("#{Dir.pwd}/", "")
-
-          Builder.new(files_to_process: [relative_filename]).build if relative_filename.start_with?(*@folders_to_watch)
-        end
+        Builder.new(files_to_process: changes).build
 
         run_tailwind
 
-        run_stimulus if changes.keys.any? { |f| f.end_with?("controller.js") }
+        run_stimulus if changes.keys.any? { |f| f.end_with?(@stimulus_controller_file) }
       end
     end
 
@@ -100,7 +103,7 @@ module ShopifyThemeBuilder
     end
 
     def run_stimulus
-      controllers_files = @folders_to_watch.map { Dir.glob("#{_1}/**/controller.js") }.flatten
+      controllers_files = @folders_to_watch.map { Dir.glob("#{_1}/**/#{@stimulus_controller_file}") }.flatten
 
       return if controllers_files.empty?
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: shopify_theme_builder
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 1.0.0
 platform: ruby
 authors:
 - Massimiliano Lattanzio
@@ -11,33 +11,39 @@ cert_chain: []
 date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
-  name: filewatcher
+  name: activesupport
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '2.1'
+        version: '6.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '9.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '2.1'
+        version: '6.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '9.0'
 - !ruby/object:Gem::Dependency
-  name: logger
+  name: filewatcher
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.7'
+        version: '2.1'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.7'
+        version: '2.1'
 - !ruby/object:Gem::Dependency
   name: tailwindcss-ruby
   requirement: !ruby/object:Gem::Requirement
@@ -84,6 +90,13 @@ files:
 - README.md
 - Rakefile
 - exe/theme-builder
+- generators/%type%.liquid.tt
+- generators/comment.txt
+- generators/controller.js.tt
+- generators/doc.txt.tt
+- generators/index.js.tt
+- generators/schema.json.tt
+- generators/style.css.tt
 - lib/shopify_theme_builder.rb
 - lib/shopify_theme_builder/builder.rb
 - lib/shopify_theme_builder/command_line.rb
@@ -116,7 +129,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.7.2
+rubygems_version: 3.6.9
 specification_version: 4
 summary: An opinionated builder for Shopify themes using nested folders, Tailwind
   CSS, and Stimulus.