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