bridgetown-core 1.0.0.alpha11 → 1.0.0.beta1

data/lib/bridgetown-core/ruby_template_view.rb

@@ -73,6 +73,10 @@ module Bridgetown
       helpers.respond_to?(method_name.to_sym, include_private) || super
     end
 
+    def inspect
+      "#<#{self.class} layout=#{layout&.label} resource=#{resource.relative_path}>"
+    end
+
     private
 
     def _render_statement(component, options)

data/lib/bridgetown-core/tags/{webpack_path.rb → asset_path.rb}

@@ -2,9 +2,9 @@
 
 module Bridgetown
   module Tags
-    # A helper class to help find the path to webpack asset inside of a webpack
+    # A helper class to help find the path to assets inside of a webpack or esbuild
     # manifest file.
-    class WebpackPath < Liquid::Tag
+    class AssetPath < Liquid::Tag
       # @param tag_name [String] Name of the tag
       # @param asset_type [String] The type of asset to parse (js, css)
       # @param options [Hash] An options hash
@@ -17,23 +17,21 @@ module Bridgetown
         @asset_type = asset_type.strip
       end
 
-      # Render an asset path based on the Webpack manifest file
+      # Render an asset path based on the frontend manifest file
       # @param context [Liquid::Context] Context passed to the tag
       #
       # @return [String] Returns "MISSING_WEBPACK_MANIFEST" if the manifest
-      # file isn't found
+      #   file isn't found
       # @return [String] Returns a blank string if the asset isn't found
       # @return [String] Returns the path to the asset if no issues parsing
-      #
-      # @raise [WebpackAssetError] if unable to find css or js in the manifest
-      # file
       def render(context)
         @context = context
         site = context.registers[:site]
-        Bridgetown::Utils.parse_webpack_manifest_file(site, @asset_type) || ""
+        Bridgetown::Utils.parse_frontend_manifest_file(site, @asset_type) || ""
       end
     end
   end
 end
 
-Liquid::Template.register_tag("webpack_path", Bridgetown::Tags::WebpackPath)
+Liquid::Template.register_tag("asset_path", Bridgetown::Tags::AssetPath)
+Liquid::Template.register_tag("webpack_path", Bridgetown::Tags::AssetPath)

data/lib/bridgetown-core/tasks/bridgetown_tasks.rake

@@ -15,7 +15,8 @@ namespace :frontend do
       run_process "Frontend", :yellow, "bundle exec bridgetown frontend:dev"
     end
     if sidecar
-      sleep 4 # give Webpack time to boot before returning control to the start command
+      # give FE bundler time to boot before returning control to the start command
+      sleep Bridgetown::Utils.frontend_bundler_type == :esbuild ? 3 : 4
     else
       trap("INT") do
         Bridgetown::Utils::Aux.kill_processes

data/lib/bridgetown-core/utils.rb

@@ -339,19 +339,34 @@ module Bridgetown
     end
     # rubocop:enable Metrics/AbcSize, Metrics/MethodLength, Metrics/PerceivedComplexity
 
+    def parse_frontend_manifest_file(site, asset_type)
+      case frontend_bundler_type(site.root_dir)
+      when :webpack
+        parse_webpack_manifest_file(site, asset_type)
+      when :esbuild
+        parse_esbuild_manifest_file(site, asset_type)
+      else
+        Bridgetown.logger.warn(
+          "Frontend:",
+          "No frontend bundling configuration was found."
+        )
+        "MISSING_FRONTEND_BUNDLING_CONFIG"
+      end
+    end
+
     # Return an asset path based on the Webpack manifest file
     # @param site [Bridgetown::Site] The current site object
     # @param asset_type [String] js or css, or filename in manifest
     #
     # @return [String] Returns "MISSING_WEBPACK_MANIFEST" if the manifest
-    # file isnt found
+    #   file isnt found
     # @return [nil] Returns nil if the asset isnt found
     # @return [String] Returns the path to the asset if no issues parsing
     #
     # @raise [WebpackAssetError] if unable to find css or js in the manifest
-    # file
+    #   file
     def parse_webpack_manifest_file(site, asset_type)
-      return log_webpack_asset_error(site, "Webpack manifest") if site.frontend_manifest.nil?
+      return log_frontend_asset_error(site, "Webpack manifest") if site.frontend_manifest.nil?
 
       asset_path = if %w(js css).include?(asset_type)
                      site.frontend_manifest["main.#{asset_type}"]
@@ -361,11 +376,40 @@ module Bridgetown
                      end&.last
                    end
 
-      return log_webpack_asset_error(site, asset_type) if asset_path.nil?
+      return log_frontend_asset_error(site, asset_type) if asset_path.nil?
 
       static_frontend_path site, ["js", asset_path]
     end
 
+    # Return an asset path based on the esbuild manifest file
+    # @param site [Bridgetown::Site] The current site object
+    # @param asset_type [String] js or css, or filename in manifest
+    #
+    # @return [String] Returns "MISSING_WEBPACK_MANIFEST" if the manifest
+    #   file isnt found
+    # @return [nil] Returns nil if the asset isnt found
+    # @return [String] Returns the path to the asset if no issues parsing
+    #
+    # @raise [WebpackAssetError] if unable to find css or js in the manifest
+    #   file
+    def parse_esbuild_manifest_file(site, asset_type) # rubocop:disable Metrics/PerceivedComplexity
+      return log_frontend_asset_error(site, "esbuild manifest") if site.frontend_manifest.nil?
+
+      asset_path = if %w(js css).include?(asset_type)
+                     folder = asset_type == "js" ? "javascript" : "styles"
+                     site.frontend_manifest["#{folder}/index.#{asset_type}"] ||
+                       site.frontend_manifest["#{folder}/index.#{asset_type}.rb"]
+                   else
+                     site.frontend_manifest.find do |item, _|
+                       item.sub(%r{^../(frontend/|src/)?}, "") == asset_type
+                     end&.last
+                   end
+
+      return log_frontend_asset_error(site, asset_type) if asset_path.nil?
+
+      static_frontend_path site, [asset_path]
+    end
+
     def static_frontend_path(site, additional_parts = [])
       path_parts = [
         site.base_path.gsub(%r(^/|/$), ""),
@@ -376,16 +420,26 @@ module Bridgetown
       Addressable::URI.parse(path_parts.join("/")).normalize.to_s
     end
 
-    def log_webpack_asset_error(site, asset_type)
-      site.data[:__webpack_asset_errors] ||= {}
-      site.data[:__webpack_asset_errors][asset_type] ||=
+    def log_frontend_asset_error(site, asset_type)
+      site.data[:__frontend_asset_errors] ||= {}
+      site.data[:__frontend_asset_errors][asset_type] ||=
         Bridgetown.logger.warn(
-          "Webpack:",
+          "#{frontend_bundler_type}:",
           "There was an error parsing your #{asset_type} file. \
           Please check your #{asset_type} file for any errors."
         )
 
-      "MISSING_WEBPACK_MANIFEST_FILE"
+      "MISSING_#{frontend_bundler_type.upcase}_MANIFEST_FILE"
+    end
+
+    def frontend_bundler_type(cwd = Dir.pwd)
+      if File.exist?(File.join(cwd, "webpack.config.js"))
+        :webpack
+      elsif File.exist?(File.join(cwd, "esbuild.config.js"))
+        :esbuild
+      else
+        :unknown
+      end
     end
 
     def default_github_branch_name(repo_url)

data/lib/bridgetown-core/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Bridgetown
-  VERSION = "1.0.0.alpha11"
+  VERSION = "1.0.0.beta1"
   CODE_NAME = "Pearl"
 end

data/lib/bridgetown-core/watcher.rb

@@ -4,6 +4,10 @@ module Bridgetown
   module Watcher
     extend self
 
+    class << self
+      attr_accessor :shutdown
+    end
+
     # Continuously watch for file changes and rebuild the site whenever a change is detected.
     #
     # @param site [Bridgetown::Site] the current site instance
@@ -15,15 +19,13 @@ module Bridgetown
 
       Bridgetown.logger.info "Watcher:", "enabled." unless options[:using_puma]
 
-      unless options[:serving]
-        trap("INT") do
-          exit 0
-        end
+      return if options[:serving]
 
-        sleep_forever
+      trap("INT") do
+        self.shutdown = true
       end
-    rescue ThreadError
-      # NOTE: not sure if this is needed any longer
+
+      sleep_forever
     end
 
     # Return a list of load paths which should be watched for changes
@@ -40,11 +42,11 @@ module Bridgetown
     #
     # @param (see #watch)
     def listen(site, options)
-      webpack_path = site.in_root_dir(".bridgetown-webpack")
-      FileUtils.mkdir(webpack_path) unless Dir.exist?(webpack_path)
+      bundling_path = site.frontend_bundling_path
+      FileUtils.mkdir_p(bundling_path)
       Listen.to(
         options["source"],
-        webpack_path,
+        bundling_path,
         *load_paths_to_watch(site, options),
         ignore: listen_ignore_paths(options),
         force_polling: options["force_polling"]
@@ -60,40 +62,38 @@ module Bridgetown
           c.each { |path| Bridgetown.logger.info "", "- #{path["#{site.root_dir}/".length..]}" }
         end
 
-        reload_site(site, options)
+        reload_site(site, options, paths: c)
       end.start
     end
 
     # Reload the site including plugins and Zeitwerk autoloaders and process it (unless SSR)
     #
-    # @param (see #watch)
-    def reload_site(site, options) # rubocop:todo Metrics/MethodLength
+    # @param site [Bridgetown::Site] the current site instance
+    # @param options [Bridgetown::Configuration] the site configuration
+    # @param paths Array<String>
+    def reload_site(site, options, paths: []) # rubocop:todo Metrics/MethodLength
       begin
         time = Time.now
         I18n.reload! # make sure any locale files get read again
         Bridgetown::Current.site = site # needed in SSR mode apparently
-        Bridgetown::Hooks.trigger :site, :pre_reload, site
-        Bridgetown::Hooks.clear_reloadable_hooks
-        site.plugin_manager.reload_plugin_files
-        site.loaders_manager.reload_loaders
-        Bridgetown::Hooks.trigger :site, :post_reload, site
-
-        if site.ssr?
-          site.reset(soft: true)
-          return
-        end
-
-        site.process
-        Bridgetown.logger.info "Done! 🎉", "#{"Completed".green} in less than" \
-                                          " #{(Time.now - time).ceil(2)} seconds."
-      rescue Exception => e
-        Bridgetown.logger.error "Error:", e.message
+        catch :halt do
+          Bridgetown::Hooks.trigger :site, :pre_reload, site, paths
+          Bridgetown::Hooks.clear_reloadable_hooks
+          site.plugin_manager.reload_plugin_files
+          site.loaders_manager.reload_loaders
+          Bridgetown::Hooks.trigger :site, :post_reload, site, paths
+
+          if site.ssr?
+            site.reset(soft: true)
+            return
+          end
 
-        if options[:trace]
-          Bridgetown.logger.info e.backtrace.join("\n")
-        else
-          Bridgetown.logger.warn "Backtrace:", "Use the --trace option for more information."
+          site.process
         end
+        Bridgetown.logger.info "Done! 🎉", "#{"Completed".bold.green} in less than" \
+                                          " #{(Time.now - time).ceil(2)} seconds."
+      rescue StandardError => e
+        Bridgetown::Errors.print_build_error(e, trace: options[:trace])
       end
       Bridgetown.logger.info ""
     end
@@ -155,7 +155,7 @@ module Bridgetown
     end
 
     def sleep_forever
-      loop { sleep 1000 }
+      sleep 0.5 until shutdown
     end
   end
 end

data/lib/bridgetown-core.rb

@@ -268,3 +268,4 @@ loader = Zeitwerk::Loader.new
 loader.push_dir File.join(__dir__, "bridgetown-core/model"), namespace: Bridgetown::Model
 loader.push_dir File.join(__dir__, "bridgetown-core/resource"), namespace: Bridgetown::Resource
 loader.setup # ready!
+Bridgetown::Model::Origin # this needs to load first

data/lib/site_template/Gemfile.erb

@@ -1,23 +1,29 @@
 source "https://rubygems.org"
 git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
-# Hello! This is where you manage which Bridgetown version is used to run.
-# When you want to use a different version, change it below, save the
-# file and run `bundle install`. Run Bridgetown like so:
+####
+# Welcome to your project's Gemfile, used by Rubygems & Bundler.
 #
-#   bin/bridgetown start (or console, etc.)
+# To install a plugin, run:
 #
-# This will help ensure the proper Bridgetown version is running.
+#   bundle add new-plugin-name -g bridgetown_plugins
+#
+# This will ensure the plugin is added to the correct Bundler group.
 #
-# To install a plugin, simply run bundle add and specify the group
-# "bridgetown_plugins". For example:
+# When you run Bridgetown commands, we recommend using a binstub like so:
 #
-#   bundle add some-new-plugin -g bridgetown_plugins
+#   bin/bridgetown start (or console, etc.)
 #
-# Happy Bridgetowning!
+# This will help ensure the proper Bridgetown version is running.
+####
 
+# If you need to upgrade/switch Bridgetown versions, change the line below
+# and then run `bundle update bridgetown`
 gem "bridgetown", "~> <%= Bridgetown::VERSION %>"
 
-# Puma is a Rack-compatible server
+# Uncomment to add file-based dynamic routing to your project:
+# gem "bridgetown-routes", "~> <%= Bridgetown::VERSION %>", group: :bridgetown_plugins
+
+# Puma is a Rack-compatible server used by Bridgetown
 # (you can optionally limit this to the "development" group)
-gem "puma", "~> 5.2"
+gem "puma", "~> 5.5"

data/lib/site_template/README.md

@@ -35,7 +35,7 @@ bundle install && yarn install
 
 To start your site in development mode, run `bin/bridgetown start` and navigate to [localhost:4000](https://localhost:4000/)!
 
-Use a [theme](https://github.com/topics/bridgetown-theme), add some [plugins](https://www.bridgetownrb.com/plugins/), and/or run some [automations](https://github.com/topics/bridgetown-automation) to get started quickly.
+Use a [theme](https://github.com/topics/bridgetown-theme) or add some [plugins](https://www.bridgetownrb.com/plugins/) to get started quickly.
 
 ### Commands
 
@@ -54,7 +54,7 @@ bin/bridgetown console
 
 ## Deployment
 
-You can deploy Bridgetown sites on "Jamstack" hosts (Netlify, Vercel, Render, etc.) or virtually any tranditional web server by simply building and copying the output folder to your HTML root.
+You can deploy Bridgetown sites on hosts like Render or Vercel as well as tranditional web servers by simply building and copying the output folder to your HTML root.
 
 > Read the [Bridgetown Deployment Documentation](https://www.bridgetownrb.com/docs/deployment) for more information.
 

data/lib/site_template/{Rakefile → Rakefile.erb}

@@ -24,6 +24,20 @@ task :clean do
   Bridgetown::Commands::Clean.start
 end
 
+<%- if frontend_bundling_option == "esbuild" -%>
+namespace :frontend do
+  desc "Build the frontend with esbuild for deployment"
+  task :build do
+    sh "yarn run esbuild"
+  end
+
+  desc "Watch the frontend with esbuild during development"
+  task :dev do
+    sh "yarn run esbuild-dev"
+  rescue Interrupt
+  end
+end
+<%- else -%>
 namespace :frontend do
   desc "Build the frontend with Webpack for deployment"
   task :build do
@@ -36,6 +50,7 @@ namespace :frontend do
   rescue Interrupt
   end
 end
+<%- end -%>
 
 #
 # Add your own Rake tasks here! You can use `environment` as a prerequisite

data/lib/site_template/TEMPLATES/erb/_components/shared/navbar.erb

@@ -0,0 +1,11 @@
+<header>
+  <img src="/images/logo.svg" alt="Logo" />
+</header>
+
+<nav>
+  <ul>
+    <li><a href="/">Home</a></li>
+    <li><a href="/about">About</a></li>
+    <li><a href="/posts">Posts</a></li>
+  </ul>
+</nav>

data/lib/site_template/TEMPLATES/erb/_components/shared/navbar.rb

@@ -0,0 +1,5 @@
+class Shared::Navbar < Bridgetown::Component
+  def initialize(metadata:, resource:)
+    @metadata, @resource = metadata, resource
+  end
+end

data/lib/site_template/TEMPLATES/erb/_layouts/default.erb

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="<%= site.locale %>">
+  <head>
+    <%= render "head", metadata: site.metadata, title: resource.data.title %>
+  </head>
+  <body class="<%= resource.data.layout %> <%= resource.data.page_class %>">
+    <%= render Shared::Navbar.new(metadata: site.metadata, resource: resource) %>
+
+    <main>
+      <%= yield %>
+    </main>
+
+    <%= render "footer", metadata: site.metadata %>
+  </body>
+</html>

data/lib/site_template/TEMPLATES/erb/_layouts/page.erb

@@ -0,0 +1,7 @@
+---
+layout: default
+---
+
+<h1><%= resource.data.title %></h1>
+
+<%= yield %>

data/lib/site_template/TEMPLATES/erb/_layouts/post.erb

@@ -0,0 +1,7 @@
+---
+layout: default
+---
+
+<h1><%= resource.data.title %></h1>
+
+<%= yield %>

data/lib/site_template/TEMPLATES/erb/_partials/_footer.erb

@@ -0,0 +1,3 @@
+<footer>
+  Contact me at <a href="mailto:<%= metadata.email %>"><%= metadata.email %></a>
+</footer>

data/lib/site_template/TEMPLATES/erb/_partials/_head.erb

@@ -0,0 +1,10 @@
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<% resource_title = strip_html(strip_newlines(title)) %>
+<title><% if resource_title != "Index" %><%= resource_title %> | <%= metadata.title %><% else %><%= metadata.title %>: <%= metadata.tagline %><% end %></title>
+
+<meta name="description" content="<%= metadata.description %>" />
+
+<link rel="stylesheet" href="<%= webpack_path :css %>" />
+<script src="<%= webpack_path :js %>" defer></script>
+<%= live_reload_dev_js %>

data/lib/site_template/TEMPLATES/liquid/_components/head.liquid

@@ -0,0 +1,10 @@
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+{% capture resource_title %}{{ title | strip_html | strip_newlines }}{% endcapture %}
+<title>{% if resource_title != "Index" %}{{ resource_title | escape }} | {{ metadata.title | escape }}{% else %}{{ metadata.title | escape }}: {{ metadata.tagline | escape }}{% endif %}</title>
+
+<meta name="description" content="{{ metadata.description }}" />
+
+<link rel="stylesheet" href="{% asset_path css %}" />
+<script src="{% asset_path js %}" defer></script>
+{% live_reload_dev_js %}

data/lib/site_template/TEMPLATES/liquid/_components/navbar.liquid

@@ -0,0 +1,11 @@
+<header>
+  <img src="/images/logo.svg" alt="Logo" />
+</header>
+
+<nav>
+  <ul>
+    <li><a href="/">Home</a></li>
+    <li><a href="/about">About</a></li>
+    <li><a href="/posts">Posts</a></li>
+  </ul>
+</nav>

data/lib/site_template/{src → TEMPLATES/liquid}/_layouts/default.liquid

@@ -3,8 +3,8 @@
   <head>
     {% render "head", metadata: site.metadata, title: page.title %}
   </head>
-  <body class="{{ page.layout }} {{ page.page_class }}">
-    {% render "navbar", metadata: site.metadata, page: page %}
+  <body class="{{ resource.data.layout }} {{ resource.data.page_class }}">
+    {% render "navbar", metadata: site.metadata, resource: resource %}
 
     <main>
       {{ content }}

data/lib/site_template/TEMPLATES/serbea/_components/shared/navbar.rb

@@ -0,0 +1,5 @@
+class Shared::Navbar < Bridgetown::Component
+  def initialize(metadata:, resource:)
+    @metadata, @resource = metadata, resource
+  end
+end

data/lib/site_template/TEMPLATES/serbea/_components/shared/navbar.serb

@@ -0,0 +1,11 @@
+<header>
+  <img src="/images/logo.svg" alt="Logo" />
+</header>
+
+<nav>
+  <ul>
+    <li><a href="/">Home</a></li>
+    <li><a href="/about">About</a></li>
+    <li><a href="/posts">Posts</a></li>
+  </ul>
+</nav>

data/lib/site_template/TEMPLATES/serbea/_layouts/default.serb

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="{%= site.locale %}">
+  <head>
+    {%@ "head", metadata: site.metadata, title: resource.data.title %}
+  </head>
+  <body class="{{ resource.data.layout }} {{ resource.data.page_class }}">
+    {%@ Shared::Navbar metadata: site.metadata, resource: resource %}
+
+    <main>
+      {%= yield %}
+    </main>
+
+    {%@ "footer", metadata: site.metadata %}
+  </body>
+</html>

data/lib/site_template/TEMPLATES/serbea/_layouts/page.serb

@@ -0,0 +1,7 @@
+---
+layout: default
+---
+
+<h1>{{ resource.data.title }}</h1>
+
+{%= yield %}

data/lib/site_template/TEMPLATES/serbea/_layouts/post.serb

@@ -0,0 +1,7 @@
+---
+layout: default
+---
+
+<h1>{{ resource.data.title }}</h1>
+
+{%= yield %}

data/lib/site_template/TEMPLATES/serbea/_partials/_footer.serb

@@ -0,0 +1,3 @@
+<footer>
+  Contact me at <a href="mailto:{{ metadata.email }}">{{ metadata.email }}</a>
+</footer>

data/lib/site_template/TEMPLATES/serbea/_partials/_head.serb

@@ -0,0 +1,10 @@
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+{{ title | strip_html | strip_newlines | assign_to: :resource_title }}
+<title>{% if @resource_title != "Index" %}{{ @resource_title }} | {{ metadata.title }}{% else %}{{ metadata.title }}: {{ metadata.tagline }}{% end %}</title>
+
+<meta name="description" content="{%= metadata.description %}" />
+
+<link rel="stylesheet" href="{%= webpack_path :css %}" />
+<script src="{%= webpack_path :js %}" defer></script>
+{%= live_reload_dev_js %}

data/lib/site_template/frontend/javascript/index.js.erb

@@ -1,11 +1,15 @@
-<%- if options["use-postcss"] -%>
+<%- if postcss_option -%>
 import "index.css"
 <%- else -%>
 import "index.scss"
 <%- end -%>
 
-// Import all javascript files from src/_components
-const componentsContext = require.context("bridgetownComponents", true, /.js$/)
+// Import all JavaScript & CSS files from src/_components
+<%- if frontend_bundling_option == "esbuild" -%>
+import components from "bridgetownComponents/**/*.{js,jsx,js.rb,css}"
+<%- else -%>
+const componentsContext = require.context("bridgetownComponents", true, /\.(js|css)$/)
 componentsContext.keys().forEach(componentsContext)
+<%- end -%>
 
 console.info("Bridgetown is loaded!")