Introduce new inline snippets tag

Inline snippets will reduce code duplication and improve the developer experience, eliminating the need for one-off snippet files
2026-09-12 23:40:45 -07:00 · 2025-10-30 12:00:44 +01:00
parent c357f91e0c
commit ed9c4e31c4
9 changed files with 470 additions and 3 deletions
@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+require 'bundler/inline'
+
+gemfile(true) do
+  source "https://rubygems.org"
+  gem 'liquid'
+end
+
+require 'liquid'
+
+class Parser
+  def initialize(template)
+    @template = template
+  end
+
+  def parse
+    @parsed_template = Liquid::Template.parse(@template)
+  end
+
+  def test_parse
+    document = @parsed_template.root
+
+    variables = []
+
+    if document.is_a?(Liquid::Document)
+      body = document.body
+
+      if body.is_a?(Liquid::BlockBody)
+        body.nodelist.each do |node|
+          next unless node.is_a?(Liquid::Variable)
+
+          puts node.inspect
+          variable_name = node.name.name
+          variables << variable_name
+        end
+      end
+    end
+    puts "Variables: #{variables}"
+  end
+
+  def render
+    @parsed_template.render
+  end
+end
+
+starter_template = "{{ foo }}"
+starter_template_2 = "{{foo}}, {{bar}}"
+starter_template_2_1 = "{{ foo }} and {{ bar }}"
+starter_template_3 = "{% assign foo = 'bar' %}{{ foo }}"
+# Let's start small here
+template = <<~LIQUID
+  {% assign foo = 'bar' %}
+  {{ foo }}
+LIQUID
+
+parser = Parser.new(starter_template)
+parser.parse
+parser.test_parse
@@ -1,6 +1,71 @@
-<p>Hello world!</p>
+<!DOCTYPE html>
+  <html lang="en">

-<p>It is {{date}}</p>
+  <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <title>Simple Code Editor</title>
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css">
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/theme/dracula.min.css">
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.js"></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/xml/xml.min.js"></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/htmlmixed/htmlmixed.min.js"></script>
+      <style>
+        .liquid, .CodeMirror {
+          position: fixed;
+          height: 100vh;
+          width: 50vw;
+          top: 0;
+          font-size: 24px;
+        }
+        .liquid {
+          left: 0;
+        }
+        .CodeMirror {
+          left: 50%;
+        }
+        .CodeMirror-hscrollbar {
+          overflow: hidden;
+        }
+      </style>
+  </head>

+  <body>
+    <div class="liquid">
+      {% snippet "main" %}

-<p>Check out the <a href="/products">Products</a> screen </p>
+        {% # Snippet input %}
+        {% snippet "input" |type, name| %}
+          <div>
+            <label>{{ type | capitalize }}</label>
+            <input type={{ type }}>
+          </div>
+        {% endsnippet %}
+
+        {% snippet "league" %}
+        <h1>Welcome to the league of super evil</h1>
+        {% endsnippet %}
+
+        {% render "league" %}
+        {% render "input", type: "text" %}
+        {% render "input", type: "password" %}
+
+      {% endsnippet %}
+      {% render 'main' %}
+    </div>
+
+    <textarea id="code">
+      {% capture html %}{% render 'main' %}{% endcapture %}
+      {{ html | escape }}
+    </textarea>
+
+    <script>
+      const editorElement = document.querySelector('#code')
+      const editor = CodeMirror.fromTextArea(editorElement, {
+          lineNumbers: true,
+          mode: "htmlmixed",
+          theme: "dracula"
+      });
+    </script>
+  </body>
+</html>