rspack_rails 0.1.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a3eb3563c7877029531bd93b2ed9036ce92b8a89c4008600ea251dfad3b641ff
-  data.tar.gz: 5d210e018044764c5e2f3f94cd06e3cb296d16e1da97d010b9e18907c1416644
+  metadata.gz: d38b564f0260e86ab95775b11d6435853d520922028c59c3acce6c7ad1af639b
+  data.tar.gz: 062aff2e71411f542808ec77ed5054935040ec6018a1a3839ba374b2cfd10dc2
 SHA512:
-  metadata.gz: 5dc66b20aadec8d3695d98448c80eb39e31a0d2c55d693002c6d318ac25c95a96ff81b8ac4829d0e60a6e09af7959ceca287f1f5c440a09af333069b6ffa0458
-  data.tar.gz: fc965e7fd0ddd80f60d120b77cf135ce9e4da264b87e66e298767c5e14e367cf9bbfda64130abc6d03d2f0368528196826e5425f8dcae8ddbe36714e9c534da8
+  metadata.gz: 0d1ab868d62a2ce92bb0cf1f330f4113e311658fea8e0174f50ef73c001fa7f67ccb580094bdb7f805606026536b7a3580ece740dd4f88d3b946baa32e84883a
+  data.tar.gz: c919c924784fb9885e4b8c9b8ae5db4255475adb9fd915a71e1a7a882a20bd02d6cf6c0eb2120928d7c89a0b214676ec3ddf92b1e785f48a89059e5e9ed02bd5

data/CHANGELOG.md

@@ -1,5 +1,22 @@
 ## [Unreleased]
 
+## [0.3.0] - 2026-11-13
+
+- Multiple entry points: every `app/javascript/entrypoints/*.{js,ts}` becomes a bundle named after the file; `application.ts` works as the main entry
+- `rspack:doctor` lists entry points and reports any that are not built
+- Fix: the dev server no longer writes `*.hot-update.js` files into `app/assets/builds`
+- Existing apps: re-run `bin/rails rspack:install` and accept the new `rspack.config.mjs`
+
+## [0.2.0] - 2026-11-13
+
+- CSS imported from JavaScript is extracted to `app/assets/builds/<entry>.bundle.css` and hot-reloaded under `rspack serve`; `*.module.css` are CSS modules
+- **Changed:** `rspack_stylesheet_tag "application"` now links `application.bundle.css` (was `application.css`)
+- TypeScript: `.ts` files and `*_controller.ts` Stimulus controllers compile with the built-in SWC loader
+- `rspack:install:typescript` adds `tsconfig.json`, `typescript` and a `typecheck` script
+- Dev server writes bundles to disk so `app/assets/builds` stays current
+- `rspack:doctor` warns when `application.bundle.css` is built but not linked
+- Existing apps: re-run `bin/rails rspack:install` (and `rspack:install:stimulus`) and accept the new `rspack.config.mjs` / `autoload.js`
+
 ## [0.1.0] - 2026-11-13
 
 - `rspack:doctor`: checks Node.js against rspack's `engines`, packages, config, entry, build output, layout, Procfile.dev, Stimulus and the dev server

data/README.md

@@ -57,17 +57,61 @@ end
 bin/rails rspack:install:stimulus
 ```
 
-This installs `@hotwired/stimulus` and adds `app/javascript/controllers/autoload.js`, imported from `application.js`. Every `*_controller.js` under `app/javascript/controllers` is registered automatically, with the usual naming (`admin/user_card_controller.js` becomes `admin--user-card`). There is no manifest to keep up to date.
+This installs `@hotwired/stimulus` and adds `app/javascript/controllers/autoload.js`, imported from `application.js`. Every `*_controller.js` (or `.ts`) under `app/javascript/controllers` is registered automatically, with the usual naming (`admin/user_card_controller.js` becomes `admin--user-card`). There is no manifest to keep up to date.
 
 Under `rspack serve`, editing a controller or adding a new one hot-swaps it in the open page without a reload, so form input and other page state survive.
 
 If `application.js` imported `./controllers` (the stimulus-rails index), the installer switches it to `./controllers/autoload`. stimulus-rails may still rewrite `controllers/index.js` when you run `bin/rails generate stimulus`, but nothing imports that file any more.
 
+### Multiple entry points
+
+Besides `app/javascript/application.js` (or `.ts`), every file in `app/javascript/entrypoints/` becomes its own bundle, named after the file:
+
+```
+app/javascript/application.js           -> application.js
+app/javascript/entrypoints/admin.ts     -> admin.js
+app/javascript/entrypoints/checkout.js  -> checkout.js (+ checkout.bundle.css if it imports CSS)
+```
+
+```erb
+<%# app/views/layouts/admin.html.erb %>
+<%= rspack_javascript_tag "admin" %>
+```
+
+Each bundle is self-contained, so load one entry per page (for example one per layout). Restart the dev server after adding a new entry point.
+
+### CSS
+
+Import CSS from your JavaScript and rspack extracts it to `app/assets/builds/<entry>.bundle.css`:
+
+```js
+// app/javascript/application.js
+import "./styles/application.css"
+```
+
+```erb
+<%= rspack_stylesheet_tag "application" %>
+```
+
+`*.module.css` files are compiled as CSS modules. Under `rspack serve`, CSS changes are applied without a page reload.
+
+The `.bundle` suffix keeps the output from clashing with `app/assets/stylesheets/application.css`. Rails 8's default `stylesheet_link_tag :app` links every CSS file under `app/assets`, so it also links the bundle. That is harmless: the dev server keeps `app/assets/builds` up to date and its own link comes later in the cascade. A rule you delete keeps applying until the next reload.
+
+### TypeScript
+
+`.ts` files compile out of the box with Rspack's built-in SWC loader, including Stimulus controllers (`*_controller.ts`). SWC strips types without checking them. For type checking:
+
+```bash
+bin/rails rspack:install:typescript   # tsconfig.json, typescript, "typecheck" script
+npm run typecheck
+```
+
 ### Tasks
 
 | Task | What it does |
 |---|---|
 | `bin/rails rspack:install:stimulus` | Sets up Stimulus with controller autoloading |
+| `bin/rails rspack:install:typescript` | Adds tsconfig.json, typescript and a `typecheck` script |
 | `bin/rails rspack:doctor` | Checks Node.js, packages, config, layout, Procfile and dev server |
 | `bin/rails rspack:build` | Installs JS dependencies, then runs `build` |
 | `bin/rails rspack:clobber` | Removes rspack output from `app/assets/builds` |
@@ -97,6 +141,8 @@ The required Node.js version comes from the `engines` field of the installed `@r
 ```bash
 bin/setup
 bundle exec rake   # specs + rubocop
+bin/integration    # new Rails app + every installer, build, doctor and precompile
+bin/integration "~> 7.2.0"   # against a specific Rails version
 ```
 
 ## License

data/lib/install/rspack.config.mjs

@@ -1,3 +1,4 @@
+import fs from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { defineConfig } from "@rspack/cli";
@@ -12,24 +13,66 @@ const isProduction =
 const host = process.env.RSPACK_DEV_SERVER_HOST || "localhost";
 const port = Number(process.env.RSPACK_DEV_SERVER_PORT || 3036);
 
+// Entries: app/javascript/application.{js,ts} plus every file in
+// app/javascript/entrypoints/, named after the file (admin.js -> "admin").
+// Restart the dev server after adding an entrypoint.
+const entry = {};
+for (const ext of ["js", "ts"]) {
+  const file = `./app/javascript/application.${ext}`;
+  if (!entry.application && fs.existsSync(path.resolve(root, file))) entry.application = file;
+}
+const entrypointsDir = path.resolve(root, "app/javascript/entrypoints");
+if (fs.existsSync(entrypointsDir)) {
+  for (const file of fs.readdirSync(entrypointsDir).sort()) {
+    const match = file.match(/^(.+)\.(js|ts)$/);
+    if (match) entry[match[1]] = `./app/javascript/entrypoints/${file}`;
+  }
+}
+
 export default defineConfig({
   mode: isProduction ? "production" : "development",
   devtool: "source-map",
-  entry: {
-    application: "./app/javascript/application.js",
-  },
+  entry,
   output: {
     path: path.resolve(root, "app/assets/builds"),
     filename: "[name].js",
     // ".digested" tells Propshaft the file is already fingerprinted.
     chunkFilename: "[name]-[contenthash].digested.js",
+    // CSS imported from JavaScript. ".bundle" avoids clashing with
+    // app/assets/stylesheets/application.css in Propshaft.
+    cssFilename: "[name].bundle.css",
+    cssChunkFilename: "[name]-[contenthash].digested.css",
     // Under `rspack serve`, chunks and hot updates load from the dev server.
     publicPath: isDevServer ? `http://${host}:${port}/` : "/assets/",
   },
+  resolve: {
+    extensions: ["...", ".ts"],
+  },
+  module: {
+    rules: [
+      {
+        // Transpile TypeScript with Rspack's built-in SWC (no type checking).
+        test: /\.ts$/,
+        exclude: /node_modules/,
+        loader: "builtin:swc-loader",
+        options: { jsc: { parser: { syntax: "typescript" } } },
+        type: "javascript/auto",
+      },
+      {
+        // Native CSS; *.module.css files become CSS modules.
+        test: /\.css$/,
+        type: "css/auto",
+      },
+    ],
+  },
   devServer: {
     host,
     port,
     hot: true,
+    // Keep app/assets/builds current while the dev server runs, so Propshaft
+    // (and `stylesheet_link_tag :app`) never serve a stale bundle. Hot update
+    // files stay in memory so they never reach public/assets.
+    devMiddleware: { writeToDisk: (file) => !/\.hot-update\./.test(file) },
     allowedHosts: "all",
     headers: { "Access-Control-Allow-Origin": "*" },
     client: {

data/lib/install/stimulus/autoload.js

@@ -1,16 +1,16 @@
-// Registers every app/javascript/controllers/**/*_controller.js with Stimulus.
+// Registers every app/javascript/controllers/**/*_controller.{js,ts} with Stimulus.
 // Managed by rspack_rails: new controllers need no manual import, and edited
 // controllers are hot-swapped under `rspack serve` without a page reload.
 import { application } from "./application"
 
 const controllers = () =>
-  import.meta.webpackContext("./", { recursive: true, regExp: /_controller\.js$/ })
+  import.meta.webpackContext("./", { recursive: true, regExp: /_controller\.[jt]s$/ })
 
 // "./users/profile_controller.js" -> "users--profile"
 const identifierFor = (key) =>
   key
     .replace(/^\.\//, "")
-    .replace(/_controller\.js$/, "")
+    .replace(/_controller\.[jt]s$/, "")
     .replace(/\//g, "--")
     .replace(/_/g, "-")
 

data/lib/install/typescript/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["@rspack/core/module"],
+    "strict": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "skipLibCheck": true
+  },
+  "include": ["app/javascript/**/*.ts"]
+}

data/lib/install/typescript.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+# Rails application template run by `bin/rails rspack:install:typescript`.
+require "json"
+
+pm = RspackRails::PackageManager.detect(Rails.root)
+
+say "Adding tsconfig.json"
+copy_file "#{__dir__}/typescript/tsconfig.json", "tsconfig.json"
+
+say "Adding typecheck script"
+package = JSON.parse(File.read("package.json"))
+(package["scripts"] ||= {})["typecheck"] = "tsc --noEmit"
+File.write("package.json", "#{JSON.pretty_generate(package)}\n")
+
+say "Installing typescript"
+run pm.add_dev_command("typescript")
+
+say "TypeScript ready. Rspack compiles .ts files; run `#{pm.run_command("typecheck")}` to type-check.", :green

data/lib/rspack_rails/doctor.rb

@@ -4,11 +4,13 @@ require "json"
 require "open3"
 require "pathname"
 require_relative "node_version"
+require_relative "entrypoints"
 
 module RspackRails
   # Inspects a Rails app's rspack setup and reports what is missing.
   class Doctor
     Check = Struct.new(:status, :name, :detail, :hint)
+    LAYOUT = "app/views/layouts/application.html.erb"
     SYMBOLS = { ok: "✓", warn: "!", error: "✗" }.freeze
 
     def initialize(root, config: RspackRails.config, dev_server: RspackRails.dev_server, node_version: nil)
@@ -21,7 +23,7 @@ module RspackRails
     def checks
       @checks ||= [
         node_check, package_check(:cli), package_check(:core), package_check(:"dev-server"),
-        config_check, scripts_check, entry_check, build_check, layout_check, procfile_check,
+        config_check, scripts_check, entry_check, build_check, layout_check, stylesheet_check, procfile_check,
         stimulus_check, dev_server_check
       ].compact
     end
@@ -90,22 +92,22 @@ module RspackRails
     end
 
     def entry_check
-      return Check.new(:ok, "Entry point", "app/javascript/application.js") if exist?("app/javascript/application.js")
+      return Check.new(:ok, "Entry points", entrypoints.keys.join(", ")) if entrypoints.any?
 
-      Check.new(:error, "Entry point", "app/javascript/application.js is missing",
-                "Create it, or point `entry` in rspack.config.mjs at your entry file")
+      Check.new(:error, "Entry points", "none found",
+                "Create app/javascript/application.js or a file in app/javascript/entrypoints/")
     end
 
     def build_check
-      built = @root.join("app/assets/builds/application.js")
-      return Check.new(:ok, "Build output", "app/assets/builds/application.js (#{built.size} bytes)") if built.exist?
+      missing = entrypoints.keys.reject { |name| exist?("app/assets/builds/#{name}.js") }
+      return Check.new(:ok, "Build output", "app/assets/builds has #{entrypoints.keys.join(", ")}") if missing.empty?
 
-      Check.new(:warn, "Build output", "app/assets/builds/application.js not built yet",
+      Check.new(:warn, "Build output", "not built yet: #{missing.join(", ")}",
                 "Run `bin/rails rspack:build` (only needed without the dev server)")
     end
 
     def layout_check
-      layout = read("app/views/layouts/application.html.erb")
+      layout = read(LAYOUT)
       return Check.new(:warn, "Layout", "app/views/layouts/application.html.erb not found") unless layout
 
       if layout.include?("javascript_importmap_tags")
@@ -118,6 +120,16 @@ module RspackRails
                 %(Add <%= rspack_javascript_tag "application" %> to get the dev server and HMR))
     end
 
+    def stylesheet_check
+      return unless exist?("app/assets/builds/application.bundle.css")
+
+      linked = read(LAYOUT)&.include?("rspack_stylesheet_tag")
+      return Check.new(:ok, "Stylesheet", "uses rspack_stylesheet_tag") if linked
+
+      Check.new(:warn, "Stylesheet", "application.bundle.css is built but not linked",
+                %(Add <%= rspack_stylesheet_tag "application" %> to your layout))
+    end
+
     def procfile_check
       procfile = read("Procfile.dev")
       if procfile&.match?(/^js: .*\bdev$/)
@@ -175,6 +187,10 @@ module RspackRails
       nil
     end
 
+    def entrypoints
+      @entrypoints ||= Entrypoints.discover(@root)
+    end
+
     def package_manager
       @package_manager ||= PackageManager.detect(@root)
     end

data/lib/rspack_rails/entrypoints.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+require "pathname"
+
+module RspackRails
+  # Mirrors the entry discovery in the generated rspack.config.mjs:
+  # app/javascript/application.{js,ts} plus every
+  # app/javascript/entrypoints/*.{js,ts}, named after the file.
+  module Entrypoints
+    EXTENSIONS = %w[js ts].freeze
+
+    module_function
+
+    # => { "application" => "app/javascript/application.js", "admin" => "app/javascript/entrypoints/admin.js" }
+    def discover(root)
+      root = Pathname(root)
+      entries = {}
+      main = EXTENSIONS.map { |ext| "app/javascript/application.#{ext}" }.find { |path| root.join(path).file? }
+      entries["application"] = main if main
+
+      Dir.glob("app/javascript/entrypoints/*.{#{EXTENSIONS.join(",")}}", base: root).sort.each do |path|
+        entries[File.basename(path, ".*")] = path
+      end
+      entries
+    end
+  end
+end

data/lib/rspack_rails/helper.rb

@@ -12,11 +12,16 @@ module RspackRails
                 "\n")
     end
 
+    # Links the CSS that rspack extracts from an entry's imports
+    # (app/assets/builds/<entry>.bundle.css).
     def rspack_stylesheet_tag(*entries, **options)
-      return stylesheet_link_tag(*entries, **options) unless RspackRails.dev_server.running?
+      unless RspackRails.dev_server.running?
+        return stylesheet_link_tag(*entries.map { |entry| "#{entry}.bundle" }, **options)
+      end
 
-      safe_join(entries.map { |entry| stylesheet_link_tag(RspackRails.dev_server.url("#{entry}.css"), **options) },
-                "\n")
+      safe_join(entries.map do |entry|
+        stylesheet_link_tag(RspackRails.dev_server.url("#{entry}.bundle.css"), **options)
+      end, "\n")
     end
   end
 end

data/lib/rspack_rails/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module RspackRails
-  VERSION = "0.1.0"
+  VERSION = "0.3.0"
 end

data/lib/rspack_rails.rb

@@ -4,6 +4,7 @@ require_relative "rspack_rails/version"
 require_relative "rspack_rails/package_manager"
 require_relative "rspack_rails/configuration"
 require_relative "rspack_rails/dev_server"
+require_relative "rspack_rails/entrypoints"
 
 # Rspack integration for Rails: rake tasks, installer and view helpers.
 module RspackRails

data/lib/tasks/rspack_rails.rake

@@ -15,6 +15,13 @@ namespace :rspack do
       system(RbConfig.ruby, "./bin/rails", "app:template", "LOCATION=#{template}") ||
         raise(RspackRails::Error, "rspack:install:stimulus failed")
     end
+
+    desc "Set up TypeScript type checking (tsconfig.json, typescript, typecheck script)"
+    task :typescript do
+      template = File.expand_path("../install/typescript.rb", __dir__)
+      system(RbConfig.ruby, "./bin/rails", "app:template", "LOCATION=#{template}") ||
+        raise(RspackRails::Error, "rspack:install:typescript failed")
+    end
   end
 
   desc "Check the rspack setup of this app"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rspack_rails
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.3.0
 platform: ruby
 authors:
 - tungnt
@@ -51,10 +51,13 @@ files:
 - lib/install/stimulus/application.js
 - lib/install/stimulus/autoload.js
 - lib/install/stimulus/hello_controller.js
+- lib/install/typescript.rb
+- lib/install/typescript/tsconfig.json
 - lib/rspack_rails.rb
 - lib/rspack_rails/configuration.rb
 - lib/rspack_rails/dev_server.rb
 - lib/rspack_rails/doctor.rb
+- lib/rspack_rails/entrypoints.rb
 - lib/rspack_rails/helper.rb
 - lib/rspack_rails/node_version.rb
 - lib/rspack_rails/package_manager.rb