rubys

<div id="<%= dom_id item %>">
  <p class="my-5">
    <strong class="block font-medium mb-1">Name:</strong>
    <%= item.name %>
  </p>

  <p class="my-5">
    <strong class="block font-medium mb-1">Contents:</strong>
    <% if item.contents.attached? %>
      <% if item.contents.content_type.start_with? 'image/' %>

rubys

--- a/app/views/items/_item.html.erb
+++ b/app/views/items/_item.html.erb
@@ -6,7 +6,21 @@
 
   <p class="my-5">
     <strong class="block font-medium mb-1">Contents:</strong>
-    <%= link_to item.contents.filename, item.contents if item.contents.attached? %>
+    <% if item.contents.attached? %>
+      <% if item.contents.content_type.start_with? 'image/' %>
+        <img src=<%= item.contents.url %> alt="<%= item.contents.filename %>">

rubys

m -rf drizzle-test
mkdir drizzle-test
cd drizzle-test
echo "{}" > package.json
npm install drizzle-orm pg
npm install -D drizzle-kit @types/pg typescript
echo "import { pgTable } from 'drizzle-orm/pg-core';" > test.ts
npx tsc test.ts

rubys

# syntax = docker/dockerfile:1

FROM node:18-slim as base

# Node app lives here
WORKDIR /app

COPY <<-"EOF" package.json
{
  "dependencies": {

rubys

# syntax = docker/dockerfile:1

# Adjust NODE_VERSION as desired
ARG NODE_VERSION=19.7.0
FROM node:${NODE_VERSION}-slim as base

LABEL fly_launch_runtime="Remix/Prisma"

# Remix/Prisma app lives here
WORKDIR /app

rubys

rails new livedemo --css tailwind
cd livedemo
bin/importmap pin @flydotio/[email protected]
echo 'export { default } from  "@rubys/stimulus-live-elements"' > app/javascript/controllers/live_elements_controller.js
bin/rails generate controller demo
echo 'Rails.application.routes.draw {root "demo#button"; post "demo/click"}' >> config/routes.rb

cat <<-"EOF" > app/views/demo/_header.html.erb
   <%= turbo_frame_tag "header", class: "block bg-#{color}-400 mb-4" do %>
    <h1 class="font-bold text-4xl">Live button demo</h1>

rubys

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

rubys

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

rubys

#
# Proof of concept - import maps with JSX transpilation.  Can trivially
# be extended to TypeScript and all the languages currently supported
# with Sprockets.
#
# There are two parts to this:
#  * Have `find_javascript_files_in_tree` in importmap-rails to not only
#      find JS files, but also files that can be transpiled to JS.  
#  * Add sprockets JSX transformer, making use of esbuild
#

rubys

const icalgen = require('ical-generator');
const fs = require('fs').promises;
const path = require('path');
const deepEqual = require('deep-equal');

const input = '/home/rubys/svn/www.apachecon.com/acah2020/tracks';
const output = '/home/rubys/svn/www.apachecon.com/acah2020/calendar';

// Configure babel
require('@babel/register')({