shopify_theme_builder 0.3.0 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 307e28c3c750b87460a048c082ba3c3287a480419c1b1c52faa84660de8b543a
-  data.tar.gz: 1ea87aa101f2858f46090e8f12d61c231bb4671dbd10aaa53b5427497690ae28
+  metadata.gz: 7d2c29efc227a315501fc0e21d47b8cb268f8cbd7da2887754321e4ae02914b2
+  data.tar.gz: 51abf4c9808331d461b486325b2a29dc3804d2546befab0ab523530370f471d3
 SHA512:
-  metadata.gz: 4997036e87e815574d49b2857e4c8f859fcd53afcd279652ec3b81b563d454bd0826c21101a616c82cb8b0b570817e1c3d6d20a827c7d91d0940f81ed5d4766c
-  data.tar.gz: 199222a677430c7ec42719ef04574050327f61f8648c5096b7d60c9f06ac9a4c03b42fdbc90e307f41b46fd916eebb79fbac437a82c67ba00f87ce3805126279
+  metadata.gz: 06e8ea516c5e0fa0ea36769a21d7c4cfcfbd5c5cbd4c4cf1c62c60707e041e645e00a7e45fcbcdea0fb993f1eef34008682901934a9f6a62299084394ba252d0
+  data.tar.gz: 1df921934a3ba4cca6f783a4409e4480cba8adaba7363503a6fbec0faf528007f86e8a02a52ccf039f3992942f6766c0f8fd573ea5a81e6625e4d939fd3f3dd6

data/README.md

@@ -33,6 +33,11 @@ _components/
     schema.json
     style.css
     index.js
+    controllers.js
+assets/
+  tailwind-output.css
+  tailwind.css
+  controllers.js
 blocks/
   button.liquid
 ```
@@ -43,6 +48,34 @@ All files inside the `button` folder will be compiled into a single `button.liqu
 
 ShopifyThemeBuilder also supports Tailwind CSS integration. You can specify an input CSS file that includes Tailwind directives and an output CSS file where the compiled styles will be saved. The watcher will automatically run the Tailwind build process whenever changes are detected in the components folder.
 
+## Stimulus JS Support
+
+ShopifyThemeBuilder supports Stimulus JS integration. You can specify an output JavaScript file where the compiled Stimulus controllers will be saved. The watcher will automatically compile the Stimulus controllers whenever changes are detected in the components folder.
+
+### How to create Stimulus controllers
+
+To create Stimulus controllers, create a `controller.js` file inside your component folder. For example:
+
+```
+_components/
+  my_component/
+    controller.js
+```
+
+The content of the `controller.js` file should follow the Stimulus controller structure. For example:
+
+```javascript
+class HelloController extends Controller {
+  connect() {
+    console.log("My component controller connected")
+  }
+}
+
+Stimulus.register("hello", HelloController)
+```
+
+When the watcher runs, it will compile all `controller.js` files from your components into a single JavaScript file that can be included in your Shopify theme.
+
 ## Installation
 
 Install the gem and add to the application's Gemfile by executing:
@@ -51,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:
@@ -61,9 +102,10 @@ bundle exec theme-builder watch
 
 You can customize multiple options when running the watcher:
 - `--folders`: Specify one or more folders to watch (default is `_components`).
-- `--tailwind-input-file`: Specify the Tailwind CSS input file (default is `src/styles/tailwind.css`).
-- `--tailwind-output-file`: Specify the Tailwind CSS output file (default is `assets/tailwind-output.css`).
+- `--tailwind-input-file`: Specify the Tailwind CSS input file (default is `./assets/tailwind.css`).
+- `--tailwind-output-file`: Specify the Tailwind CSS output file (default is `./assets/tailwind-output.css`).
 - `--skip-tailwind`: Skip the Tailwind CSS build process (default is `false`).
+- `--stimulus-output-file`: Specify the Stimulus JS output file (default is `./assets/controllers.js`).
 
 If you need help with all available options, or how to set them, run:
 
@@ -71,14 +113,24 @@ 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
 ```
 
+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`).
+
+## Tested With
+
+- [Skeleton Theme](https://github.com/Shopify/skeleton-theme)
+- [Horizon Theme](https://github.com/Shopify/horizon)
+
 ## Development
 
 After checking out the repo, run `bin/setup` to install dependencies. Then, run `bin/rspec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
@@ -88,9 +140,10 @@ To install this gem onto your local machine, run `bundle exec rake install`. To
 ## Next Steps
 
 - [x] Run the tailwind build process automatically.
-- [ ] Add Stimulus JS support.
-- [ ] Create a command to build an example component with all the files.
-- [ ] Decompile existing Shopify files into components structure (?).
+- [x] Add Stimulus JS support.
+- [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,23 +1,194 @@
 # 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"
     method_option :tailwind_output_file, type: :string, default: "./assets/tailwind-output.css",
                                          desc: "Tailwind CSS output file"
     method_option :skip_tailwind, type: :boolean, default: false, desc: "Skip Tailwind CSS processing"
+    method_option :stimulus_output_file, type: :string, default: "./assets/controllers.js",
+                                         desc: "Stimulus controllers output file"
     def watch
       ShopifyThemeBuilder.watch(
         folders_to_watch: options[:folders],
         tailwind_input_file: options[:tailwind_input_file],
         tailwind_output_file: options[:tailwind_output_file],
-        skip_tailwind: options[:skip_tailwind]
+        skip_tailwind: options[:skip_tailwind],
+        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/filewatcher.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+require "filewatcher"
+
+module ShopifyThemeBuilder
+  # It wraps the Filewatcher functionality to monitor file changes.
+  # It delegates method calls to the underlying Filewatcher instance.
+  # Check: https://github.com/filewatcher/filewatcher
+  class Filewatcher
+    def initialize(...)
+      @filewatcher = ::Filewatcher.new(...)
+    end
+
+    def method_missing(name, ...)
+      if @filewatcher.respond_to?(name)
+        @filewatcher.send(name, ...)
+      else
+        super
+      end
+    end
+
+    def respond_to_missing?(name, include_private)
+      @filewatcher.respond_to?(name) || super
+    end
+  end
+end

data/lib/shopify_theme_builder/liquid_processor.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "logger"
+
 module ShopifyThemeBuilder
   # LiquidProcessor is responsible for processing Liquid files
   # by combining various related files (Liquid, schema, CSS, JS, doc, comment)
@@ -22,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
@@ -44,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.
@@ -110,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
@@ -119,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.3.0"
+  VERSION = "1.0.0"
 end

data/lib/shopify_theme_builder/watcher.rb

@@ -1,27 +1,128 @@
 # frozen_string_literal: true
 
-require "filewatcher"
+require "fileutils"
+require "tailwindcss/ruby"
 
 module ShopifyThemeBuilder
-  # Watcher class for ShopifyThemeBuilder.
-  # It wraps the Filewatcher functionality to monitor file changes.
-  # It delegates method calls to the underlying Filewatcher instance.
-  # Check: https://github.com/filewatcher/filewatcher
+  # Watcher is responsible for monitoring specified folders for changes
+  # and triggering the build process for Shopify theme components.
   class Watcher
-    def initialize(...)
-      @filewatcher = Filewatcher.new(...)
+    def initialize(
+      folders_to_watch: ["_components"],
+      tailwind_input_file: "./assets/tailwind.css",
+      tailwind_output_file: "./assets/tailwind-output.css",
+      skip_tailwind: false,
+      stimulus_output_file: "./assets/controllers.js"
+    )
+      @folders_to_watch = folders_to_watch
+      @tailwind_input_file = tailwind_input_file
+      @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 method_missing(name, ...)
-      if @filewatcher.respond_to?(name)
-        @filewatcher.send(name, ...)
-      else
-        super
+    def watch
+      create_folders
+
+      initial_build
+
+      create_tailwind_file
+
+      run_tailwind
+
+      run_stimulus
+
+      watch_folders
+    end
+
+    private
+
+    def create_folders
+      puts "Creating necessary folders..."
+
+      FileUtils.mkdir_p(@folders_to_watch)
+      FileUtils.mkdir_p("sections")
+      FileUtils.mkdir_p("blocks")
+      FileUtils.mkdir_p("snippets")
+    end
+
+    def initial_build
+      puts "Doing an initial build..."
+
+      files_to_process = {}
+
+      @folders_to_watch.each do |folder|
+        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|
+        Builder.new(files_to_process: changes).build
+
+        run_tailwind
+
+        run_stimulus if changes.keys.any? { |f| f.end_with?(@stimulus_controller_file) }
       end
     end
 
-    def respond_to_missing?(name, include_private)
-      @filewatcher.respond_to?(name) || super
+    def run_tailwind
+      return if @skip_tailwind
+
+      puts "Running Tailwind CSS build..."
+
+      system("tailwindcss", "-i", @tailwind_input_file, "-o", @tailwind_output_file)
+    end
+
+    def create_tailwind_file
+      return if @skip_tailwind || File.exist?(@tailwind_input_file)
+
+      puts "Creating default Tailwind CSS input file at '#{@tailwind_input_file}'..."
+
+      FileUtils.mkdir_p(File.dirname(@tailwind_input_file))
+      File.write @tailwind_input_file, tailwind_base_config
+    end
+
+    def tailwind_base_config
+      return '@import "tailwindcss";' if Gem::Version.new(Tailwindcss::Ruby::VERSION) >= Gem::Version.new("4.0.0")
+
+      system("tailwindcss", "init") unless File.exist?("tailwind.config.js")
+
+      <<~TAILWIND.strip
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      TAILWIND
+    end
+
+    def run_stimulus
+      controllers_files = @folders_to_watch.map { Dir.glob("#{_1}/**/#{@stimulus_controller_file}") }.flatten
+
+      return if controllers_files.empty?
+
+      puts "Building Stimulus controllers..."
+
+      content = +base_stimulus_content
+
+      controllers_files.each do |file|
+        content << File.read(file)
+        content << "\n"
+      end
+
+      FileUtils.mkdir_p(File.dirname(@stimulus_output_file))
+      File.write(@stimulus_output_file, content.strip)
+    end
+
+    def base_stimulus_content
+      "import { Application, Controller } from \"https://unpkg.com/@hotwired/stimulus/dist/stimulus.js\"\n\
+window.Stimulus = Application.start()\n\n"
     end
   end
 end

data/lib/shopify_theme_builder.rb

@@ -1,70 +1,15 @@
 # frozen_string_literal: true
 
-require "fileutils"
-require "logger"
 require_relative "shopify_theme_builder/version"
-require_relative "shopify_theme_builder/watcher"
+require_relative "shopify_theme_builder/filewatcher"
 require_relative "shopify_theme_builder/liquid_processor"
 require_relative "shopify_theme_builder/builder"
 require_relative "shopify_theme_builder/command_line"
+require_relative "shopify_theme_builder/watcher"
 
 # The main module for ShopifyThemeBuilder.
 module ShopifyThemeBuilder
-  class << self
-    def watch(
-      folders_to_watch: ["_components"],
-      tailwind_input_file: "./assets/tailwind.css",
-      tailwind_output_file: "./assets/tailwind-output.css",
-      skip_tailwind: false
-    )
-      create_folders(folders_to_watch)
-
-      initial_build(folders_to_watch)
-
-      run_tailwind(tailwind_input_file, tailwind_output_file) unless skip_tailwind
-
-      watch_folders(folders_to_watch) do
-        run_tailwind(tailwind_input_file, tailwind_output_file) unless skip_tailwind
-      end
-    end
-
-    private
-
-    def create_folders(folders_to_watch)
-      puts "Creating necessary folders..."
-
-      FileUtils.mkdir_p(folders_to_watch)
-      FileUtils.mkdir_p("sections")
-      FileUtils.mkdir_p("blocks")
-      FileUtils.mkdir_p("snippets")
-    end
-
-    def initial_build(folders_to_watch)
-      puts "Doing an initial build..."
-
-      folders_to_watch.each do |folder|
-        Builder.new(files_to_process: Dir.glob("#{folder}/**/*.*")).build
-      end
-    end
-
-    def watch_folders(folders_to_watch)
-      puts "Watching for changes in '#{folders_to_watch.join(", ")}' folders..."
-
-      Watcher.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
-
-        yield if block_given?
-      end
-    end
-
-    def run_tailwind(tailwind_input_file, tailwind_output_file)
-      puts "Running Tailwind CSS build..."
-
-      system("tailwindcss", "-i", tailwind_input_file, "-o", tailwind_output_file)
-    end
+  def self.watch(...)
+    Watcher.new(...).watch
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: shopify_theme_builder
 version: !ruby/object:Gem::Version
-  version: 0.3.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,9 +90,17 @@ 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
+- lib/shopify_theme_builder/filewatcher.rb
 - lib/shopify_theme_builder/liquid_processor.rb
 - lib/shopify_theme_builder/version.rb
 - lib/shopify_theme_builder/watcher.rb
@@ -115,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.