vite_react 0.1.5 → 0.1.8

data/lib/install/application.css

@@ -1,69 +1,98 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+/*
+@plugin "@tailwindcss/forms"
+@plugin "@tailwindcss/typography" 
+@plugin "@tailwindcss/container-queries"
+@plugin "tailwindcss-animate";
+*/
+
+@variant dark (&:where(.dark, .dark *));
+
+
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+}
 
-/* Example theming with CSS variables */
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
+    --background: var(--color-neutral-50);
+    --foreground: var(--color-neutral-900);
+    --card: hsl(0 0% 100%);
+    --card-foreground: hsl(0 0% 3.9%);
+    --popover: hsl(0 0% 100%);
+    --popover-foreground: hsl(0 0% 3.9%);
+    --primary: hsl(0 0% 9%);
+    --primary-foreground: hsl(0 0% 98%);
+    --secondary: hsl(0 0% 96.1%);
+    --secondary-foreground: hsl(0 0% 9%);
+    --muted: hsl(0 0% 96.1%);
+    --muted-foreground: hsl(0 0% 45.1%);
+    --accent: hsl(0 0% 96.1%);
+    --accent-foreground: hsl(0 0% 9%);
+    --destructive: hsl(0 84.2% 60.2%);
+    --destructive-foreground: hsl(0 0% 98%);
+    --border: hsl(0 0% 89.8%);
+    --input: hsl(0 0% 89.8%);
+    --ring: hsl(0 0% 3.9%);
+    --chart-1: hsl(12 76% 61%);
+    --chart-2: hsl(173 58% 39%);
+    --chart-3: hsl(197 37% 24%);
+    --chart-4: hsl(43 74% 66%);
+    --chart-5: hsl(27 87% 67%);
     --radius: 0.5rem;
   }
+
   .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
+    --background: var(--color-neutral-950);
+    --foreground: var(--color-neutral-100);
+    --card: hsl(0, 0%, 3.9%);
+    --card-foreground: hsl(0 0% 98%);
+    --popover: hsl(0 0% 3.9%);
+    --popover-foreground: hsl(0 0% 98%);
+    --primary: hsl(0 0% 98%);
+    --primary-foreground: hsl(0 0% 9%);
+    --secondary: hsl(0 0% 14.9%);
+    --secondary-foreground: hsl(0 0% 98%);
+    --muted: hsl(0 0% 14.9%);
+    --muted-foreground: hsl(0 0% 63.9%);
+    --accent: hsl(0 0% 14.9%);
+    --accent-foreground: hsl(0 0% 98%);
+    --destructive: hsl(0 62.8% 30.6%);
+    --destructive-foreground: hsl(0 0% 98%);
+    --border: hsl(0 0% 14.9%);
+    --input: hsl(0 0% 14.9%);
+    --ring: hsl(0 0% 83.1%);
+    --chart-1: hsl(220 70% 50%);
+    --chart-2: hsl(160 60% 45%);
+    --chart-3: hsl(30 80% 55%);
+    --chart-4: hsl(280 65% 60%);
+    --chart-5: hsl(340 75% 55%);
   }
 }
 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

data/lib/install/application.jsx

@@ -0,0 +1,15 @@
+import "@hotwired/turbo-rails";
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+function hydrateComponents() {
+  document.querySelectorAll("[data-react-component]").forEach(async (el) => {
+    const componentName = el.getAttribute("data-react-component");
+    const props = JSON.parse(el.getAttribute("data-props") || "{}");
+    const module = await import(`../components/${componentName}.tsx`);
+    const Component = module.default;
+    ReactDOM.hydrateRoot(el, <Component {...props} />);
+  });
+}
+
+document.addEventListener("DOMContentLoaded", hydrateComponents);

data/lib/install/index.html.erb

@@ -27,5 +27,5 @@ a .logo.react {
   animation: logo-spin infinite 20s linear;
 }
 </style>
-<%= turbo_mount('App') %>
+<%= react_component('App') %>
 

data/lib/install/opentelemetry.rb.tt

@@ -0,0 +1,10 @@
+require "opentelemetry/sdk"
+require "opentelemetry/instrumentation/rails"
+require "opentelemetry-exporter-otlp"
+
+
+OpenTelemetry::SDK.configure do |c|
+  c.service_name = "<%= Rails.application.class.module_parent_name.underscore.dasherize %>"
+  c.use_all()
+end if Rails.env.production?
+

data/lib/install/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  }
+}

data/lib/install/ssr.ts

@@ -0,0 +1,70 @@
+import express, { Request, Response } from 'express';
+import { createServer as createViteServer } from 'vite';
+import React from "react";
+import { renderToPipeableStream } from "react-dom/server";
+import parse from 'html-react-parser';
+
+
+
+const port = process.env.PORT || 4000;
+
+async function startServer() {
+  const app = express();
+
+  // Create Vite server in middleware mode.
+  const vite = await createViteServer({
+    server: { middlewareMode: true },
+    appType: 'custom'
+  });
+
+  // Use Vite's middleware.
+  app.use(vite.middlewares);
+
+  app.use(express.json());
+
+  // SSR render endpoint
+  app.post("/render", async (req: Request, res: Response) => {
+    try {
+      const { component, props } = req.body;
+      console.log("props", props)
+      render(component, props, res);
+    } catch (error) {
+      vite.ssrFixStacktrace(error as Error);
+      console.error("SSR error:", error);
+      res.status(500).send("Internal Server Error");
+    }
+  });
+
+  app.listen(port, () => console.log(`vite_react_ssr Node server listening on port ${port}`));
+}
+
+
+
+async function render(componentName: string, props: any, res: Response) {
+
+  const module = await import(`@/ssr-components/${componentName}.tsx`);
+  const Component = module.default;
+  if (props?.children) {
+    props.children = parse(props.children);
+  }
+
+  const element = React.createElement(Component, props);
+
+  const streamObj = renderToPipeableStream(element, {
+    onShellReady() {
+      res.setHeader("Content-Type", "text/html");
+      streamObj.pipe(res);
+    },
+    onShellError(error) {
+      console.error("Shell error:", error);
+      res.status(500).send("Internal Server Error");
+    },
+    onError(error) {
+      console.error("Streaming error:", error);
+    }
+  });
+}
+
+startServer();
+
+

data/lib/install/tailwind.config.js

@@ -1,37 +1,15 @@
-const defaultTheme = require('tailwindcss/defaultTheme')
-
+/** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: ['class'],
-  content: [
-    './public/*.html',
-    './app/helpers/**/*.rb',
-    './app/javascript/**/*.{js,jsx,ts,tsx}',
-    './app/views/**/*.{erb,haml,html,slim}'
-  ],
+  darkMode: ["class"],
+  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
   theme: {
     extend: {
-      fontFamily: {
-        sans: [
-          'Inter var',
-          ...defaultTheme.fontFamily.sans
-        ]
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)'
-      },
       colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
         background: 'hsl(var(--background))',
         foreground: 'hsl(var(--foreground))',
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))'
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))'
-        },
         primary: {
           DEFAULT: 'hsl(var(--primary))',
           foreground: 'hsl(var(--primary-foreground))'
@@ -40,6 +18,10 @@ module.exports = {
           DEFAULT: 'hsl(var(--secondary))',
           foreground: 'hsl(var(--secondary-foreground))'
         },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))'
+        },
         muted: {
           DEFAULT: 'hsl(var(--muted))',
           foreground: 'hsl(var(--muted-foreground))'
@@ -48,27 +30,45 @@ module.exports = {
           DEFAULT: 'hsl(var(--accent))',
           foreground: 'hsl(var(--accent-foreground))'
         },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))'
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))'
         },
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        chart: {
-          '1': 'hsl(var(--chart-1))',
-          '2': 'hsl(var(--chart-2))',
-          '3': 'hsl(var(--chart-3))',
-          '4': 'hsl(var(--chart-4))',
-          '5': 'hsl(var(--chart-5))'
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))'
+        }
+      },
+      borderRadius: {
+        lg: '`var(--radius)`',
+        md: '`calc(var(--radius) - 2px)`',
+        sm: 'calc(var(--radius) - 4px)'
+      },
+      keyframes: {
+        'accordion-down': {
+          from: {
+            height: '0'
+          },
+          to: {
+            height: 'var(--radix-accordion-content-height)'
+          }
+        },
+        'accordion-up': {
+          from: {
+            height: 'var(--radix-accordion-content-height)'
+          },
+          to: {
+            height: '0'
+          }
         }
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out'
       }
     }
   },
-  plugins: [
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/typography'),
-    require('@tailwindcss/container-queries'),
-    require('tailwindcss-animate')
-  ]
+  plugins: [require("tailwindcss-animate")],
 }
+
+

data/lib/install/tsconfig.app.json

@@ -22,7 +22,7 @@
 
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./app/javascript/*"]
+      "@/*": ["app/javascript/*"]
     }
   },
   "include": ["app/javascript/**/*"]

data/lib/install/tsconfig.node.json

@@ -16,7 +16,11 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["app/javascript/*"]
+    }
   },
   "include": ["vite.config.ts"]
 }

data/lib/install/{vite.config.js → vite.config.ts}

@@ -2,12 +2,20 @@ import path from 'path'
 import { defineConfig } from 'vite'
 import RubyPlugin from 'vite-plugin-ruby'
 import react from "@vitejs/plugin-react"
+import tailwindcss from '@tailwindcss/vite'
+
 
 export default defineConfig({
   plugins: [
     react(),
     RubyPlugin(),
+    tailwindcss()
   ],
+  server: {
+    watch: {
+      usePolling: true
+    }
+  },
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./app/javascript"),

data/lib/install/vite_react.rb

@@ -1,8 +1,26 @@
 say "=== Vite-react setup starting... ===", :green
 
+unless File.exist? "starting"
+  create_file "starting"
+else
+  remove_file "starting"
+  exit
+end
+
 gem "vite_rails", "~> 3.0"
-gem "turbo-mount", "~> 0.4.1"
+# gem "turbo-mount", "~> 0.4.1"
+gem "tailwindcss-ruby", "~> 4.0.0.beta.9"
 gem "tailwindcss-rails", "~> 3.0"
+gem "opentelemetry-sdk"
+gem "opentelemetry-instrumentation-rails"
+gem "opentelemetry-exporter-otlp"
+gem "yabeda"
+gem "yabeda-gc"
+gem "yabeda-rails"
+gem "yabeda-activerecord"
+gem "yabeda-activejob"
+gem "yabeda-prometheus"
+
 
 
 rails_command "tailwindcss:install"
@@ -19,32 +37,35 @@ say "=== Installing Vite, React, Tailwind, shadcn, etc. ===", :green
 # --- Vite ---
 run "bundle exec vite install"
 
+
 # --- Install NPM dependencies ---
 run <<~CMD
     npm install \
       react react-dom \
-      turbo-mount stimulus-vite-helpers clsx tailwind-merge \
-      @hotwired/turbo-rails \
+      express typescript @types/express @types/node ts-node nodemon \
+      stimulus-vite-helpers clsx tailwind-merge \
+      @hotwired/turbo-rails  \
       @rails/actioncable @rails/activestorage \
-      class-variance-authority clsx tailwind-merge lucide-react
+      class-variance-authority clsx tailwind-merge lucide-react html-react-parser
 CMD
 
 run <<~CMD
     npm install -D \
-      @vitejs/plugin-react eslint globals eslint-plugin-react-refresh typescript-eslint @eslint/js \
+      @vitejs/plugin-react eslint globals eslint-plugin-react-refresh @eslint/js \
       @types/react @types/react-dom vite-plugin-stimulus-hmr vite-plugin-full-reload \
-      tailwind autoprefixer tailwindcss-animate \
+      tailwind @tailwindcss/postcss @tailwindcss/vite autoprefixer tailwindcss-animate @types/node \
       @tailwindcss/typography @tailwindcss/container-queries @tailwindcss/forms
 CMD
 
 # Initialize Tailwind configs
-run "npx tailwindcss init -p"
+# run "npx tailwindcss init -p"
+copy_file "#{__dir__}/postcss.config.mjs", "postcss.config.mjs"
 
 # --------------------------------------------------------------------------
 # 2.3.2: Overwrite vite.config.js with your React + Ruby config
 # --------------------------------------------------------------------------
-remove_file "vite.config.js"
-copy_file "#{__dir__}/vite.config.js", "vite.config.js"
+remove_file "vite.config.ts"
+copy_file "#{__dir__}/vite.config.ts", "vite.config.ts"
 
 # --------------------------------------------------------------------------
 # 2.3.3: Add TypeScript config files
@@ -67,41 +88,18 @@ create_file "app/javascript/controllers/index.js", <<~JS
     registerControllers(application, controllers);
 JS
 
-
 copy_file "#{__dir__}/application.css", "app/javascript/entrypoints/application.css"
-
+remove_file "app/assets/stylesheets/application.tailwind.css"
+copy_file "#{__dir__}/application.css", "app/assets/stylesheets/application.tailwind.css"
 # 2.3.5: Create the main JS entrypoint for Vite
 remove_file "app/javascript/entrypoints/application.js"
-create_file "app/javascript/entrypoints/application.js", <<~JS
-    import "@hotwired/turbo-rails";
-    import "../controllers";
-    import "./turbo-mount";
-    import "./application.css";
-
-    console.log("Hello from application.js");
-JS
-
-# --------------------------------------------------------------------------
-# 2.4: turbo-mount installation
-# --------------------------------------------------------------------------
-say "=== Installing turbo-mount ===", :green
-generate "turbo_mount:install --framework=react"
-
-# We’ll create a dedicated turbo-mount entry for React components
-remove_file "app/javascript/turbo-mount.js"
-create_file "app/javascript/entrypoints/turbo-mount.js", <<~JS
-    import { TurboMount } from "turbo-mount";
-    import { registerComponent } from "turbo-mount/react";
-
-    // Example React component
-    import { App } from "@/components/App";
-
-    const turboMount = new TurboMount();
-    registerComponent(turboMount, "App", App);
-JS
+copy_file "#{__dir__}/application.jsx", "app/javascript/entrypoints/application.jsx"
+empty_directory "app/javascript/ssr"
+copy_file "#{__dir__}/ssr.ts", "app/javascript/ssr/ssr.ts"
+copy_file "#{__dir__}/AppSSR.tsx", "app/javascript/ssr-components/App.tsx"
 
 # --------------------------------------------------------------------------
-# 2.5: Example React component + Home controller
+# 2.4: Example React component + Home controller
 # --------------------------------------------------------------------------
 
 copy_file "#{__dir__}/App.tsx", "app/javascript/components/App.tsx"
@@ -119,32 +117,33 @@ route "root to: 'route#index'"
 remove_file "app/views/route/index.html.erb", force: true
 copy_file "#{__dir__}/index.html.erb", "app/views/route/index.html.erb"
 
-# --------------------------------------------------------------------------
-# 2.6: Insert needed tags in application.html.erb
-# --------------------------------------------------------------------------
-insert_into_file "app/views/layouts/application.html.erb",
-  after: "<%= csrf_meta_tags %>\n" do
-    <<~ERB
-      <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
-      <%= javascript_importmap_tags %>
-      <%= vite_client_tag %>
-      <%= vite_javascript_tag 'application' %>
-    ERB
-  end
-
 # --------------------------------------------------------------------------
 # 2.7: shadcn initialization
 # --------------------------------------------------------------------------
-#run "npx shadcn@latest init"
+# run "npx shadcn@latest init"
 copy_file "#{__dir__}/components.json", "components.json"
 copy_file "#{__dir__}/utils.ts", "app/javascript/lib/utils.ts"
-remove_file "tailwind.config.json"
+remove_file "tailwind.config.js"
+copy_file "#{__dir__}/postcss.config.mjs", "postcss.config.mjs"
 copy_file "#{__dir__}/tailwind.config.js", "tailwind.config.js"
+remove_file "Procfile.dev"
+copy_file "#{__dir__}/Procfile.dev", "Procfile.dev"
+
 
 # --------------------------------------------------------------------------
-# 2.8  setup eslint
-copy_file "#{__dir__}/eslint.config.js", "eslint.config.js"
+# 2.8  setup telemetry
+# --------------------------------------------------------------------------
+template "#{__dir__}/opentelemetry.rb.tt", "config/initializers/opentelemetry.rb"
+insert_into_file "config/routes.rb",
+  before: "  get \"up\" => \"rails/health#show\", as: :rails_health_check\n" do
+     "  mount Yabeda::Prometheus::Exporter, at: \"/metrics\"\n"
+  end
 
+gsub_file "app/views/layouts/application.html.erb",
+  /<%= vite_javascript_tag 'application' %>/,
+  "<%= vite_javascript_tag 'application.jsx' %>"
+rails_command "assets:precompile"
+run "bundle exec vite build --ssr"
 # --------------------------------------------------------------------------
 # 2.9: Done!
 # --------------------------------------------------------------------------

data/lib/tasks/install.rake

@@ -1,8 +1,3 @@
-# desc "Explaining what the task does"
-# task :vite_react do
-#   # Task goes here
-# end
-#
 namespace :vite_react do
   desc "Install the vite react setup"
   task :install do

data/lib/vite_react/configuration.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module ViteReact
+  class Configuration
+    # Port for the Node/Vite SSR server.
+    attr_accessor :node_server_port
+    # Path to the Node executable (optional override)
+    attr_accessor :node_path
+
+    def initialize
+      @node_server_port = 4000
+      @node_path = nil # uses system's node by default
+    end
+  end
+end

data/lib/vite_react/engine.rb

@@ -0,0 +1,16 @@
+require "rails"
+
+module ViteReact
+  class Engine < ::Rails::Engine
+    config.app_generators do |generate|
+       generate.assets true # create assets when generating a scaffold
+       generate.force_plural false # allow pluralized model names
+       generate.helper true # generate helpers
+       generate.integration_tool :test_unit # which tool generates integration tests (might be overwritten automatically if using rspec-rails)
+       generate.system_tests :test_unit # which tool generates system tests (might be overwritten automatically if using rspec-rails)
+       generate.resource_controller :controller # which generator generates a controller when using bin/rails generate resource
+       generate.resource_route true # generate a resource route definition
+       generate.scaffold_controller :vite_react
+     end
+  end
+end