jspm-rails 0.1.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d28f515c7c82e31da220cc7dca25540b499ad2f3ca9f98f0b9e9092dc31940a6
-  data.tar.gz: 2fa31fa61006a069f3d8876ce5c68e60e0e766852749ff062656a1436e67f7e6
+  metadata.gz: 2066a105c29bf4cebd19a25c1afa9ac3bfb7530b080cd5f347ed1c69e3cd56b2
+  data.tar.gz: 1e89f49cd667a1b7771b90b2df5a8d36918d0cdb78334fe6cdee6d831d470fcc
 SHA512:
-  metadata.gz: 1dc7843f5631aa615fb7797120c6d047c74808ff08d6ec429db85b3ef1efff1a61419a35f5dd10c644df650cfd9484ea20a455ecd8ef25151714eb959678e2fa
-  data.tar.gz: 2074d972cf1e2a2fb11a8753df72228a5cb1984b43455c906e23c176d3bb8d5a110e846c43ebffe4c267544e5faedc16fab871050e9bc9fe70197bb1eee16a3b
+  metadata.gz: 4253a93277d3368d3e2e34fe023aeee5ac6d74090417941e36056ea65ccffb3f9465909e036ae52a00caa3bb403ef0b3d9ee7e6de26299b0f741487baf11fa30
+  data.tar.gz: 330b9d72f4d2b528aa4701d655cc066adf83da4fbfef4f718eb472c624d0398f52542e05ee84b97bfc3b25d4219f227e25ba2f02bc7aab9bd524cefc8ddae6ef

data/CHANGELOG.md

@@ -1,9 +1,20 @@
 # Changelog
 
-## 0.1.0 (unreleased)
+## 0.3.0 (unreleased)
 
-- `bin/rails jspm:install` traces `app/javascript/application.js` with jspm and vendors every module it reaches. It copies npm dependencies' stylesheets, fonts and images. `config/importmap.json` locks versions, and `package-lock.json` overrides it for packages installed with npm.
+- Names every module in `app/javascript` in the import map, so stimulus-rails's `eagerLoadControllersFrom` finds controllers.
+
+## 0.2.0 (unreleased)
+
+- Reads Yarn 1's `yarn.lock` as well as `package-lock.json`.
+- No longer copies npm packages' stylesheets, fonts and images. Put the directories you use on Propshaft's load path instead.
+- A package in the lockfile wins over a gem's file with the same name.
+
+## 0.1.0 (2026-11-13)
+
+- `bin/rails jspm:install` traces `app/javascript/application.js` with jspm and vendors every module it reaches. `config/importmap.json` locks versions, and `package-lock.json` overrides it for packages installed with npm.
 - `javascript_jspm_tags` renders the import map with Propshaft's digested paths, preloads, and the entry module.
 - Modules on Propshaft's load path, including engines', are importable by asset name, the way importmap-rails pins work.
+- Modules on Propshaft's load path, including engines', are importable by asset name, the way importmap-rails pins work.
 - `bin/rails jspm:check` fails when `config/importmap.json` or `vendor/jspm` is out of date.
 - Warns when the import map can't match `package-lock.json`.

data/README.md

@@ -1,10 +1,4 @@
-```
-   _                                   _  _
-  (_) ___ _ __  _ __        _ _  __ _ (_)| | ___
-  | |(_-<| '_ \| '  \  ___ | '_|/ _` || || |(_-<
- _/ |/__/| .__/|_|_|_||___||_|  \__,_||_||_|/__/
-|__/     |_|
-```
+<p align="center"><img src="docs/banner.svg" alt="jspm-rails" width="576"></p>
 
 [![CI](https://github.com/ClayShentrup/jspm-rails/actions/workflows/ci.yml/badge.svg)](https://github.com/ClayShentrup/jspm-rails/actions/workflows/ci.yml)
 
@@ -19,7 +13,6 @@ bin/rails jspm:install
 ```
       traced  ./app/javascript/application.js
     vendored  31 modules from ga.jspm.io
-      copied  73 assets from node_modules
        wrote  config/importmap.json
 ```
 
@@ -96,6 +89,8 @@ import 'controllers'                    // app/javascript/controllers/index.js
 import { helper } from './helpers.js'
 ```
 
+**Every module in `app/javascript` is in the import map by name,** even ones nothing imports directly, as importmap-rails's `pin_all_from` names them. So stimulus-rails's `eagerLoadControllersFrom("controllers", application)` and `lazyLoadControllersFrom` work unchanged.
+
 **Import modules that gems ship the same way.** Every engine's `app/assets` directories are on Propshaft's load path, so a gem's modules are importable by asset name with no setup:
 
 ```js
@@ -112,7 +107,7 @@ const { default: katex } = await import('katex')
 
 **Plain jspm works on its own.** The install resolves each package you import from jspm.io. That's the latest version, or the newest within a range you give in `package.json`'s `dependencies`, as jspm does. `config/importmap.json` is jspm's lockfile: every install keeps the versions it already holds.
 
-**Install a package with npm when you want more.** Its version in `package-lock.json` then overrides the import map, and you get:
+**Install a package with npm or Yarn 1 when you want more.** Its version in `package-lock.json` or `yarn.lock` then overrides the import map, and you get:
 
 - Dependabot pull requests for it.
 - Its stylesheets, fonts and images in `node_modules`, at the same version as its JavaScript.
@@ -121,17 +116,19 @@ Mix the two freely. A package's JavaScript always comes from jspm.io either way.
 
 ## Stylesheets, fonts and images
 
-jspm.io serves JavaScript. For a package's other files, install it with npm as a dependency. The install copies the stylesheets, fonts and images of every package in `dependencies`, and their dependencies, into `vendor/jspm/<package>/`:
+jspm.io serves JavaScript. For a package's other files, install it with npm and put the directory that holds them on Propshaft's load path, as Rails's generated `config/initializers/assets.rb` suggests:
 
-```erb
-<%= stylesheet_link_tag 'katex/dist/katex' %>
+```ruby
+Rails.application.config.assets.paths << Rails.root.join('node_modules/katex/dist')
 ```
 
-Propshaft rewrites the `url()`s in the stylesheet to digested paths, so the fonts load too. The CSS comes from npm and the JavaScript from jspm.io, both at the version in `package-lock.json`.
+```erb
+<%= stylesheet_link_tag 'katex' %>
+```
 
-Each name starts with its package, so two packages' `style.css` never collide. `devDependencies` are build tools, so the install leaves them out.
+Propshaft rewrites the `url()`s in the stylesheet to digested paths, so the fonts load too. The CSS comes from npm and the JavaScript from jspm.io, both at the version in your lockfile.
 
-Why copy, instead of putting `node_modules` on the load path? Propshaft checks every file on its load path for changes before each request in development. With one real app's `node_modules` (8,900 files), that took a page request from 1.4 ms to 98 ms. Production would also precompile all of `node_modules` into `public/assets`.
+Add the directory you use, not the whole package or all of `node_modules`. Propshaft checks every file on its load path before each development request and precompiles every one, so `bootstrap-icons/font` (7 files) costs far less than the package (2,089).
 
 ## Keeping up to date
 
@@ -145,7 +142,7 @@ Why copy, instead of putting `node_modules` on the load path? Propshaft checks e
 bin/rails jspm:check
 ```
 
-It traces again without writing anything. It fails when an install would change `config/importmap.json`, for example after Dependabot bumps `package-lock.json`. It also fails when a module is missing from `vendor/jspm`, or a copied stylesheet, font or image no longer matches `node_modules`:
+It traces again without writing anything. It fails when an install would change `config/importmap.json`, for example after Dependabot bumps `package-lock.json`. It also fails when a module is missing from `vendor/jspm`:
 
 ```
        stale  config/importmap.json
@@ -165,7 +162,7 @@ npm installs two versions of a package when its dependents' ranges don't overlap
 ## Deploying
 
 - **Commit `config/importmap.json` and `vendor/jspm`.** `assets:precompile` digests the vendored modules like any other asset.
-- **Production needs no Node, no npm and no jspm.io.**
+- **Production needs no jspm.io,** and no Node unless you serve stylesheets from `node_modules`, which needs your packages installed before precompiling.
 - **An `asset_host` on another origin must send `Access-Control-Allow-Origin`.** Browsers load modules and fonts across origins only with CORS.
 - **Content Security Policy works.** Every tag carries the request's nonce.
 - **Turbo reloads the page when the import map changes,** because the map's tag has `data-turbo-track="reload"`.
@@ -176,8 +173,7 @@ npm installs two versions of a package when its dependents' ranges don't overlap
 
 1. Boots the app, then traces `app/javascript/application.js` with [`@jspm/generator`](https://github.com/jspm/generator). Every module on Propshaft's load path is importable by asset name. The previous `config/importmap.json` locks versions, and `package-lock.json` pins every package npm installed. Only packages your code reaches end up in the map, so KaTeX's command-line dependency stays out.
 2. Downloads each traced module from jspm.io, with its source map, into `vendor/jspm/ga.jspm.io`.
-3. Copies each npm dependency's stylesheets, fonts and images into `vendor/jspm/<package>/`.
-4. Writes jspm's import map to `config/importmap.json`, with the list of modules to preload. Local modules appear as `asset:` plus their logical path, such as `asset:astrology/math_controller.js`, so the map is the same on every machine.
+3. Writes jspm's import map to `config/importmap.json`, with the list of modules to preload. Local modules appear as `asset:` plus their logical path, such as `asset:astrology/math_controller.js`, so the map is the same on every machine.
 
 `javascript_jspm_tags` renders that map for Propshaft. Propshaft serves each file under a digested name, so the helper rewrites the map's URLs:
 
@@ -239,15 +235,15 @@ Node printed the reason just above. Usually Node isn't on your `PATH`, or `@jspm
 **Modules or fonts fail to load with an asset host**
 The asset host must send `Access-Control-Allow-Origin`. See [Deploying](#deploying).
 
-**A package's stylesheet 404s**
-Install the package with npm as a dependency, not a devDependency, and run the install. See [Stylesheets, fonts and images](#stylesheets-fonts-and-images).
+**A package's stylesheet raises `Propshaft::MissingAssetError`**
+Add its directory to `config.assets.paths`. See [Stylesheets, fonts and images](#stylesheets-fonts-and-images).
 
 ## Development
 
 ```sh
 bundle install
 npm ci && npx playwright install chromium
-(cd spec/dummy && npm ci) && (cd spec/fixtures/conflicted && npm ci)
+(cd spec/dummy && npm ci) && (cd spec/fixtures/conflicted && npm ci) && (cd spec/fixtures/yarn && yarn install --frozen-lockfile)
 bundle exec rake
 ```
 

data/lib/jspm/check.rb

@@ -1,6 +1,5 @@
 # frozen_string_literal: true
 
-require 'fileutils'
 require 'json'
 
 module Jspm
@@ -10,11 +9,10 @@ module Jspm
     def self.call(asset_paths:, output:, root:)
       lockfile = Lockfile.read(root)
       trace = Trace.call(asset_paths:, lockfile:, root:)
-      new(lockfile:, output:, root:, trace:).call
+      new(output:, root:, trace:).call
     end
 
-    def initialize(lockfile:, output:, root:, trace:)
-      @lockfile = lockfile
+    def initialize(output:, root:, trace:)
       @output = output
       @root = root
       @trace = trace
@@ -23,12 +21,10 @@ module Jspm
     def call
       written = written?
       missing = missing_modules
-      stale_assets = stale_asset_paths
       report('stale', Paths::IMPORT_MAP) unless written
       missing.each { |path| report('missing', path) }
-      stale_assets.each { |path| report('stale', path) }
 
-      up_to_date = written && missing.empty? && stale_assets.empty?
+      up_to_date = written && missing.empty?
       if up_to_date
         report('ok', 'nothing to install')
       else
@@ -39,22 +35,13 @@ module Jspm
 
     private
 
-    attr_reader :lockfile, :output, :root, :trace
+    attr_reader :output, :root, :trace
 
     def written?
       import_map_file = root.join(Paths::IMPORT_MAP)
       import_map_file.exist? && JSON.parse(import_map_file.read) == trace.import_map
     end
 
-    def stale_asset_paths
-      copies = Assets.copies(lockfile:, root:)
-      stale =
-        copies.reject do |source, target|
-          target.file? && FileUtils.compare_file(source, target)
-        end
-      stale.map { |_source, target| target.relative_path_from(root).to_s }
-    end
-
     def missing_modules
       vendored = trace.cdn_urls.map { |url| File.join(Paths::VENDOR, Paths.logical(url)) }
       vendored.reject { |path| root.join(path).file? }

data/lib/jspm/install.rb

@@ -5,8 +5,7 @@ require 'json'
 require 'net/http'
 
 module Jspm
-  # Vendors every module the trace reaches from jspm.io, copies npm
-  # dependencies' stylesheets, fonts and images, and writes
+  # Vendors every module the trace reaches from jspm.io, and writes
   # config/importmap.json.
   class Install
     SOURCE_MAP = %r{//# sourceMappingURL=(?<path>\S+\.map)\s*\z}
@@ -32,16 +31,10 @@ module Jspm
       cdn = URI(Paths::CDN)
       cdn_urls = trace.cdn_urls
       Net::HTTP.start(cdn.host, cdn.port, use_ssl: true) { |http| download_all(http, cdn_urls, vendor_dir) }
-      copies = Assets.copies(lockfile:, root:)
-      copies.each do |source, target|
-        target.dirname.mkpath
-        FileUtils.cp(source, target)
-      end
       root.join(Paths::IMPORT_MAP).write("#{JSON.pretty_generate(trace.import_map)}\n")
 
       report('traced', Paths::ENTRY_PATH)
       report('vendored', "#{cdn_urls.size} modules from ga.jspm.io")
-      report('copied', "#{copies.size} assets from node_modules")
       report('wrote', Paths::IMPORT_MAP)
       warn_about_versions
     end

data/lib/jspm/lockfile.rb

@@ -3,14 +3,11 @@
 require 'json'
 
 module Jspm
-  # The packages npm installed, as package-lock.json records them.
+  # The packages npm or Yarn installed, as package-lock.json or yarn.lock
+  # records them.
   class Lockfile
     Package =
-      Data.define(:dev, :name, :path, :top_level, :version) do
-        def browser?
-          top_level && !dev
-        end
-
+      Data.define(:name, :top_level, :version) do
         def resolution
           [name, version]
         end
@@ -21,18 +18,24 @@ module Jspm
       end
     private_constant :Package
 
-    def self.read(root)
-      json = JSON.parse(root.join('package-lock.json').read)
-      installed = json.fetch('packages').reject { |path, _package| path.empty? }
-      packages =
+    class << self
+      def read(root)
+        packages = root.join('yarn.lock').exist? ? YarnLock.packages(root) : npm_packages(root)
+        new(packages: packages.map { |package| Package.new(**package) })
+      end
+
+      private
+
+      def npm_packages(root)
+        json = JSON.parse(root.join('package-lock.json').read)
+        installed = json.fetch('packages').reject { |path, _package| path.empty? }
         installed.map do |path, package|
           name = path.split('node_modules/').last
           top_level = path.scan('node_modules/').one?
           version = package.fetch('version')
-          dev = package.fetch('dev', false)
-          Package.new(dev:, name:, path:, top_level:, version:)
+          { name:, top_level:, version: }
         end
-      new(packages:)
+      end
     end
 
     def initialize(packages:)
@@ -43,10 +46,6 @@ module Jspm
       packages.select(&:top_level).to_h(&:resolution)
     end
 
-    def browser_packages
-      packages.select(&:browser?)
-    end
-
     def nested_versions(name)
       nested = packages.select { |package| package.nested?(name) }
       nested.map(&:version)

data/lib/jspm/paths.rb

@@ -12,7 +12,8 @@ module Jspm
     ENTRY_PATH = "#{LOCAL}#{ENTRY}".freeze
     IMPORT_MAP = 'config/importmap.json'
     VENDOR = 'vendor/jspm'
-    public_constant :CDN, :ENTRY, :ENTRY_PATH, :IMPORT_MAP, :LOCAL, :VENDOR
+    public_constant :CDN, :ENTRY, :ENTRY_PATH, :IMPORT_MAP, :VENDOR
+    private_constant :LOCAL
 
     def self.logical(url)
       return url.delete_prefix('https://').sub('/npm:', '/npm/') if url.start_with?(CDN)

data/lib/jspm/tags.rb

@@ -9,7 +9,7 @@ module Jspm
   # imports name its siblings undigested. So the rendered map also sends each
   # undigested module URL to its digested one.
   class Tags
-    MODULE_EXTENSIONS = %w[.css .js .mjs].freeze
+    MODULE_EXTENSIONS = %w[.js .mjs].freeze
     private_constant :MODULE_EXTENSIONS
 
     def self.call(view:)

data/lib/jspm/trace.mjs

@@ -8,7 +8,7 @@ import { readFileSync } from 'node:fs';
 import { createRequire } from 'node:module';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 
-const { entry, inputMap, resolutions, root } = JSON.parse(readFileSync(0, 'utf8'));
+const { entries, inputMap, resolutions, root } = JSON.parse(readFileSync(0, 'utf8'));
 const rootUrl = pathToFileURL(`${root}/`);
 const generatorPath = createRequire(rootUrl).resolve('@jspm/generator');
 const { Generator } = await import(pathToFileURL(generatorPath));
@@ -37,7 +37,7 @@ const generator = new Generator({
   resolutions,
 });
 
-const { dynamicDeps, staticDeps } = await generator.link(entry);
+const { dynamicDeps, staticDeps } = await generator.link(entries);
 const map = generator.getMap();
 
 process.stdout.write(

data/lib/jspm/trace.rb

@@ -17,10 +17,20 @@ module Jspm
         pathnames = asset_paths.map { |path| Pathname(path) }
         module_paths = pathnames.reject { |path| path == vendor_dir }
         local_modules = LocalModules.find(asset_paths: module_paths)
+        resolutions = lockfile.resolutions
+        # A package the app installed beats a gem's file of the same name, such
+        # as actiontext's trix.js, so the app and its packages share one copy.
+        pins = local_modules.pins.reject { |name, _path| resolutions.key?(name) }
+        # Every app module is traced and named in the map, as importmap-rails
+        # pins them, so code can import one by a name it computes, the way
+        # stimulus-rails's eagerLoadControllersFrom does.
+        app_dir = root.join('app/javascript').to_s
+        app_modules = pins.select { |_name, path| path.start_with?(app_dir) }
+                          .keys
         input = JSON.generate(
-          entry: Paths::ENTRY_PATH,
-          inputMap: { imports: locked_versions(root).merge(local_modules.pins), scopes: {} },
-          resolutions: lockfile.resolutions,
+          entries: [Paths::ENTRY_PATH, *app_modules],
+          inputMap: { imports: locked_versions(root).merge(pins), scopes: {} },
+          resolutions:,
           root: root.to_s
         )
         script = File.expand_path('trace.mjs', __dir__)

data/lib/jspm/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Jspm
-  VERSION = '0.1.0'
+  VERSION = '0.3.0'
   public_constant :VERSION
 end

data/lib/jspm/yarn_lock.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+require 'json'
+
+module Jspm
+  # Reads Yarn 1's yarn.lock. Unlike package-lock.json, it doesn't record
+  # where each package sits in node_modules. A package locked at one version
+  # is the top-level one. When Yarn locked several versions, the one
+  # node_modules holds at its top level is.
+  module YarnLock
+    Entry = Data.define(:name, :version)
+    private_constant :Entry
+
+    class << self
+      def packages(root)
+        entries = parse(root.join('yarn.lock').read)
+        counts = entries.map(&:name).tally
+        entries.map do |entry|
+          name = entry.name
+          version = entry.version
+          locked_once = counts.fetch(name) == 1
+          installed = installed_version(root.join('node_modules', name)) == version
+          { name:, top_level: locked_once || installed, version: }
+        end
+      end
+
+      private
+
+      def installed_version(package_dir)
+        manifest = package_dir.join('package.json')
+        JSON.parse(manifest.read).fetch('version') if manifest.exist?
+      end
+
+      def parse(text)
+        blocks =
+          text.split(/\n{2,}/).reject do |block|
+            block.start_with?('#') || block.strip.empty?
+          end
+        blocks.map { |block| parse_entry(block) }
+      end
+
+      def parse_entry(block)
+        header, *body = block.lines(chomp: true)
+        spec = header.delete_suffix(':').split(', ').first.delete('"')
+        version = body.find { |line| line.start_with?('  version ') }[/"(.*)"/, 1]
+        Entry.new(name: spec.rpartition('@').first, version:)
+      end
+    end
+  end
+end

data/lib/jspm-rails.rb

@@ -1,6 +1,5 @@
 # frozen_string_literal: true
 
-require 'jspm/assets'
 require 'jspm/check'
 require 'jspm/helper'
 require 'jspm/install'
@@ -11,3 +10,4 @@ require 'jspm/railtie'
 require 'jspm/tags'
 require 'jspm/trace'
 require 'jspm/version'
+require 'jspm/yarn_lock'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jspm-rails
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Clay Shentrup
@@ -49,7 +49,6 @@ files:
 - LICENSE
 - README.md
 - lib/jspm-rails.rb
-- lib/jspm/assets.rb
 - lib/jspm/check.rb
 - lib/jspm/helper.rb
 - lib/jspm/install.rb
@@ -61,6 +60,7 @@ files:
 - lib/jspm/trace.mjs
 - lib/jspm/trace.rb
 - lib/jspm/version.rb
+- lib/jspm/yarn_lock.rb
 - lib/tasks/jspm.rake
 homepage: https://github.com/ClayShentrup/jspm-rails
 licenses:

data/lib/jspm/assets.rb

@@ -1,46 +0,0 @@
-# frozen_string_literal: true
-
-module Jspm
-  # The stylesheets, fonts and images of each npm dependency, and where each
-  # one is vendored. devDependencies are build tools, so they stay out.
-  module Assets
-    EXTENSIONS = %w[
-      .avif
-      .css
-      .eot
-      .gif
-      .jpeg
-      .jpg
-      .otf
-      .png
-      .svg
-      .ttf
-      .webp
-      .woff
-      .woff2
-    ].freeze
-    private_constant :EXTENSIONS
-
-    class << self
-      # Each copy is a pair: the file in node_modules, and its vendored path.
-      def copies(lockfile:, root:)
-        lockfile.browser_packages.flat_map { |package| package_copies(package, root) }
-      end
-
-      private
-
-      def package_copies(package, root)
-        package_dir = root.join(package.path)
-        vendor_dir = root.join(Paths::VENDOR, package.name)
-        files =
-          package_dir.glob('**/*').select do |file|
-            EXTENSIONS.include?(file.extname.downcase)
-          end
-        files.map do |file|
-          relative_path = file.relative_path_from(package_dir)
-          [file, vendor_dir.join(relative_path)]
-        end
-      end
-    end
-  end
-end