rspack_rails 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a3eb3563c7877029531bd93b2ed9036ce92b8a89c4008600ea251dfad3b641ff
-  data.tar.gz: 5d210e018044764c5e2f3f94cd06e3cb296d16e1da97d010b9e18907c1416644
+  metadata.gz: b7f84e6f9280bcf6d3fbd54f2a3a267a817e7c333d4c89a70c8e171b477f3e85
+  data.tar.gz: '09e2d5eb77331777f33a1b58478ba1bac7774ffe83308b0f97236653fb80f534'
 SHA512:
-  metadata.gz: 5dc66b20aadec8d3695d98448c80eb39e31a0d2c55d693002c6d318ac25c95a96ff81b8ac4829d0e60a6e09af7959ceca287f1f5c440a09af333069b6ffa0458
-  data.tar.gz: fc965e7fd0ddd80f60d120b77cf135ce9e4da264b87e66e298767c5e14e367cf9bbfda64130abc6d03d2f0368528196826e5425f8dcae8ddbe36714e9c534da8
+  metadata.gz: 79928a7186a0b752296a5d82cf5e570ce87730a24ce2c1c515c4490be4585fe512790b68b4bdef81f9a76c608a73a615d4db75d7891889092f1a8a56a7a76e66
+  data.tar.gz: 11660d1b0a381e43a789b8b5b2b92593784755cbfda2d00f32f1646b784dd39d959329fa2845febf900e4e6af38e4879c816832ecb5f2c944e1f8d6241ffbe47

data/CHANGELOG.md

@@ -1,5 +1,15 @@
 ## [Unreleased]
 
+## [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,44 @@ 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.
 
+### 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` |

data/lib/install/rspack.config.mjs

@@ -22,14 +22,41 @@ export default defineConfig({
     path: path.resolve(root, "app/assets/builds"),
     filename: "[name].js",
     // ".digested" tells Propshaft the file is already fingerprinted.
-    chunkFilename: "[name]-[contenthash].digested.js",
+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.
+    devMiddleware: { writeToDisk: true },
     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

@@ -9,6 +9,7 @@ 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 +22,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
@@ -105,7 +106,7 @@ module RspackRails
     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 +119,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$/)

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.2.0"
 end

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.2.0
 platform: ruby
 authors:
 - tungnt
@@ -51,6 +51,8 @@ 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