lit-ts-demo.md

Rails 7 + import maps + Lit component + TypeScript

This is a follow-on to Rails 7 + import maps + JSX proof of concept.

• It now uses the sprockets-esbuild gem, and therefore has a smaller monkey-patch.
• It uses Lit and TypeScript instead of React and JSX.

Overall flow:

• Create project
  • rails new lit-ts-demo
  • Add sprocket-esbuild gem to bundle
  • Add monkey patch for importmap-rails to support sprocket transpilation
• Prep for development of Lit elements
  • make a directory for javascript elements
    • pin the contents of the directory to the import map
    • link the directory to the manifest, specifying ts as the file extension
  • pin the lit and lit/decorators.js modules
• Create and use the simple-greeting element
  • create simple-greeting.ts in the app/javascript/elements directory
  • import the simple-greeting element in the application
  • generate a Rails controller with a single view
  • make use of the simple-greeting element in the view

Start the server with ./bin/rails server, and visit http://localhost:3000/lit/demo

Shell script to do the above appears below

lit-ts-demo.sh

# Create a project
rm -rf lit-ts-demo
rails new lit-ts-demo
cd lit-ts-demo
bundle add sprockets-esbuild
cat <<-'EOF' > config/initializers/importmap_monkeypatch.rb
class Importmap::Map
  # determine what extensions to look for by parsing the manifest
  def exts_for_path(path)
    exts = Set.new ['.js']

    # Read the manifest
    config_dir = File.join(Rails.root, 'app/assets/config')
    manifest_file = File.join(config_dir, 'manifest.js')
    manifest = IO.read(manifest_file)

    # Extract extensions from the manifest
    manifest.scan(%r{//=\s+link_\w+\s+(\S+)\s+(\.\S+)}).map do |match|
      link = File.expand_path(match[0], config_dir)
      exts << match[1] if path.relative_path_from(link).to_s =~ /^(\w|\.$)/
    end

    exts
  rescue
    ['.js']
  end

  # find all files matching the manifest in a given path
  def find_javascript_files_in_tree(path)
    files = []

    exts_for_path(path).each do |ext|
      files += Dir[path.join("**/*#{ext}")].collect do |file|
        next if File.directory? file
        Pathname.new(file.chomp(ext) + '.js')
      end
    end

    files.compact
  end
end
EOF

# Prep for development of Lit elements
mkdir app/javascript/elements
echo 'pin_all_from "app/javascript/elements", under: "elements"' >> config/importmap.rb
echo '//= link_tree ../../javascript/elements .ts' >> app/assets/config/manifest.js
./bin/importmap pin lit
./bin/importmap pin lit/decorators.js

# Simple greeting example from https://lit.dev/
cat <<-'EOF' > app/javascript/elements/simple-greeting.ts
import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  @property()
  name = 'Somebody';

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}
EOF
echo 'import "elements/simple-greeting"' >> app/javascript/application.js
./bin/rails generate controller lit demo
echo '<simple-greeting name="World"></simple-greeting>' > app/views/lit/demo.html.erb