superglue 2.0.0.rc.2 → 2.0.0.rc.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f1f55d71343032c2ba77a23c74ae0af75e1e823c358b606b33c84af34bee88da
-  data.tar.gz: 0a2e8ad51c13e8467f06c88229a4f863aa7bd8d888228186ff10af6e2cc8179a
+  metadata.gz: aff506e09c15008bbc37ae8c5e14ce6c7ab0520956fd0f31653a3deb90a6e674
+  data.tar.gz: 9a3f7534e42d41ae13e08f496debbc3d692d085f99dc36875f6b047956a1eda4
 SHA512:
-  metadata.gz: 210c9b55e64faaac22fcc10b1e61bb5882a13d1ec2cd91bd6380002734f1d86f59e90af21cfa13daf0e071081ff1a7e5f4db255625b9bf3a587f4d0a4dd67839
-  data.tar.gz: 11034825a30df06cc80525daca022d66b14ac9b4fd5566656faf3cb29d09521290a45f4f83409d85272872e95d66733ba5e9766052fc72b234a7f96ff2186c1f
+  metadata.gz: 2a1b558cad7439918dde128f6cf45ba12b6d028d63d4cca79d22d125d8add1f81ee486f9319d5a5d9fb1e43cccdb86d33d42a5100e603ffb22371a63d6978272
+  data.tar.gz: e285f3872cbc1f9235971fc27171cc277121ca4f89a5aa91a8c775b040f8599253001382f7aee66f799c6a93ff54349df95f5a498ce115d6d0660f0f42577572

data/lib/generators/superglue/install/install_generator.rb

@@ -1,4 +1,5 @@
 require "json"
+require "shellwords"
 require "rails/generators/named_base"
 require "rails/generators/resource_helpers"
 
@@ -9,32 +10,33 @@ module Superglue
 
       class_option :typescript,
         type: :boolean,
-        required: false,
-        default: false,
-        desc: "Use typescript"
+        default: true,
+        desc: "Use TypeScript. Pass --no-typescript for JavaScript."
 
       class_option :bundler,
         type: :string,
         required: false,
-        desc: "JavaScript bundler to use (esbuild, bun, rollup, webpack). Skips interactive prompt."
+        desc: "JavaScript bundler to use (esbuild, bun, rollup, webpack). Defaults to the detected bundler."
 
+      # A string default, rather than nil, lets `--no-validator` (which Thor
+      # parses as nil) be told apart from leaving the option out.
       class_option :validator,
         type: :string,
-        required: false,
-        desc: "Runtime type validator to use (deepkit, typia, none). Skips interactive prompt."
+        default: "auto",
+        desc: "Runtime type validator to use (deepkit, typia). Pass --no-validator to skip it. " \
+          "auto picks typia on TypeScript 7 or later (or when TypeScript is not installed yet) " \
+          "and deepkit on TypeScript 6 or earlier."
 
       class_option :svgr,
         type: :boolean,
-        required: false,
-        desc: "Enable SVGR to import SVGs as React components. Skips interactive prompt."
+        default: true,
+        desc: "Enable SVGR to import SVGs as React components. Pass --no-svgr to disable."
 
       def create_files
         remove_file "#{app_js_path}/application.js"
 
-        @use_typescript = options["typescript"]
-        @bundler = ask_bundler
-        @validator = @use_typescript ? ask_validator : "none"
-        @use_svgr = ask_svgr
+        resolve_choices
+        say_choices
 
         if @use_typescript
           copy_ts_files
@@ -60,6 +62,9 @@ module Superglue
         say "Copying stream.json.props"
         copy_file "#{__dir__}/templates/stream.json.props", "app/views/layouts/stream.json.props"
 
+        say "Adding initial page state and #app container to application.html.erb"
+        update_application_layout
+
         say "Adding required member methods to ApplicationRecord"
         add_member_methods
 
@@ -102,20 +107,33 @@ module Superglue
         false
       end
 
-      def ask_bundler
-        if options["bundler"]
-          bundler = options["bundler"]
-          unless BUNDLERS.include?(bundler)
-            raise Thor::Error, "Unknown bundler '#{bundler}'. Must be one of: #{BUNDLERS.join(", ")}"
-          end
-          say "Using bundler: #{bundler}", :green
-          return bundler
-        end
+      # typia's ttsc toolchain needs TypeScript 7's native compiler, while
+      # deepkit's type compiler needs the JavaScript compiler API that
+      # TypeScript 7 removed.
+      TYPIA_MIN_TYPESCRIPT = 7
+      DEEPKIT_MAX_TYPESCRIPT = 6
+      AUTO_VALIDATOR = "auto"
+
+      def resolve_choices
+        @bundler = resolve_bundler
+        @use_typescript = options["typescript"]
+        @typescript_major = detect_typescript_major
+        @validator = resolve_validator
+        @use_svgr = options["svgr"]
+      end
 
-        detected = detect_bundler
+      def resolve_bundler
+        requested_bundler = options["bundler"]
+        detected_bundler = detect_bundler
 
-        if detected
-          say "Detected #{detected} in your project.", :green
+        if requested_bundler
+          unless BUNDLERS.include?(requested_bundler)
+            raise Thor::Error, "Unknown bundler '#{requested_bundler}'. Must be one of: #{BUNDLERS.join(", ")}"
+          end
+
+          requested_bundler
+        elsif detected_bundler
+          detected_bundler
         else
           say "No JavaScript bundler detected.", :red
           say "Install one first via jsbundling-rails:"
@@ -123,38 +141,141 @@ module Superglue
           say "See: https://github.com/rails/jsbundling-rails"
           raise Thor::Error, "No bundler found. Install one via jsbundling-rails and re-run this generator."
         end
+      end
 
-        ask("Which bundler are you using?", limited_to: BUNDLERS, default: detected)
+      # The major version of the project's TypeScript: the installed package
+      # first, then the range declared in package.json. nil when TypeScript is
+      # not part of the project yet, or its range has no version (e.g. "latest").
+      def detect_typescript_major
+        installed_version = installed_typescript_version
+        declared_range = declared_typescript_range
+        version = installed_version || declared_range
+
+        version.to_s[/\d+/]&.to_i
       end
 
-      def ask_validator
-        if options["validator"]
-          validator = options["validator"]
-          unless VALIDATORS.include?(validator)
-            raise Thor::Error, "Unknown validator '#{validator}'. Must be one of: #{VALIDATORS.join(", ")}"
-          end
-          say "Runtime type validator: #{validator}", :green
-          return validator
+      def installed_typescript_version
+        manifest_path = "node_modules/typescript/package.json"
+
+        if File.exist?(manifest_path)
+          JSON.parse(File.read(manifest_path))["version"]
         end
+      rescue JSON::ParserError
+        nil
+      end
 
-        say ""
-        say "Superglue can add runtime type validation during development."
-        say "  deepkit - works with TypeScript 5 and below (uses bundler plugin)"
-        say "  typia   - works with TypeScript 6 and above (uses ttsc)"
-        say "  none    - skip runtime type validation"
-        ask("Which runtime type validator would you like to use?", limited_to: VALIDATORS, default: "none")
+      def declared_typescript_range
+        if File.exist?("package.json")
+          package_json = JSON.parse(File.read("package.json"))
+          dependencies = (package_json["dependencies"] || {}).merge(package_json["devDependencies"] || {})
+          dependencies["typescript"]
+        end
+      rescue JSON::ParserError
+        nil
+      end
+
+      # --no-validator and --skip-validator arrive as nil; --validator=none
+      # still works too.
+      def resolve_validator
+        requested_validator = options["validator"]
+        validator_disabled = requested_validator.nil? || requested_validator == "none"
+        validator_automatic = requested_validator == AUTO_VALIDATOR
+
+        if validator_disabled
+          "none"
+        elsif validator_automatic
+          @use_typescript ? default_validator : "none"
+        elsif !@use_typescript
+          raise Thor::Error, "--validator=#{requested_validator} requires TypeScript. Remove --no-typescript."
+        else
+          ensure_validator_supported(requested_validator)
+          requested_validator
+        end
+      end
+
+      def default_validator
+        typescript_supports_typia = @typescript_major.nil? || @typescript_major >= TYPIA_MIN_TYPESCRIPT
+
+        if typescript_supports_typia
+          "typia"
+        else
+          "deepkit"
+        end
+      end
+
+      def ensure_validator_supported(validator)
+        typescript_detected = !@typescript_major.nil?
+        typia_unsupported = validator == "typia" && typescript_detected && @typescript_major < TYPIA_MIN_TYPESCRIPT
+        deepkit_unsupported = validator == "deepkit" && typescript_detected && @typescript_major > DEEPKIT_MAX_TYPESCRIPT
+
+        if !VALIDATORS.include?(validator)
+          raise Thor::Error, "Unknown validator '#{validator}'. Must be one of: #{VALIDATORS.join(", ")}"
+        elsif typia_unsupported
+          raise Thor::Error, "typia requires TypeScript #{TYPIA_MIN_TYPESCRIPT} or later, found TypeScript #{@typescript_major}"
+        elsif deepkit_unsupported
+          raise Thor::Error, "deepkit requires TypeScript #{DEEPKIT_MAX_TYPESCRIPT} or earlier, found TypeScript #{@typescript_major}"
+        end
+      end
+
+      # The TypeScript package to install, or nil to keep the project's own.
+      # Re-adding an existing typescript would upgrade it to the latest release.
+      def typescript_package
+        typescript_missing = @typescript_major.nil?
+
+        if typescript_missing && @validator == "deepkit"
+          "typescript@^#{DEEPKIT_MAX_TYPESCRIPT}"
+        elsif typescript_missing
+          "typescript@^#{TYPIA_MIN_TYPESCRIPT}"
+        end
       end
 
-      def ask_svgr
-        unless options["svgr"].nil?
-          say "SVGR: #{options["svgr"] ? "enabled" : "disabled"}", :green
-          return options["svgr"]
+      # Pins each package to the range @thoughtbot/superglue declares as a
+      # peer, so the validator toolchain matches what superglue was tested
+      # against. Runs after superglue is installed; a package superglue
+      # doesn't declare installs at its latest version.
+      def superglue_peer_packages(*package_names)
+        manifest_path = "node_modules/@thoughtbot/superglue/package.json"
+        peer_ranges = if File.exist?(manifest_path)
+          JSON.parse(File.read(manifest_path))["peerDependencies"] || {}
+        else
+          {}
+        end
+
+        package_names.map do |package_name|
+          peer_range = peer_ranges[package_name]
+
+          if peer_range
+            Shellwords.escape("#{package_name}@#{peer_range}")
+          else
+            package_name
+          end
+        end
+      end
+
+      def say_choices
+        bundler_source = options["bundler"] ? "from --bundler" : "detected"
+        typescript_source = if @typescript_major
+          "TypeScript #{@typescript_major} detected"
+        else
+          "will install #{typescript_package}"
+        end
+        validator_source = case options["validator"]
+        when AUTO_VALIDATOR then typescript_source
+        when nil then "from --no-validator"
+        else "from --validator"
         end
 
         say ""
-        say "SVGR lets you import SVGs as React components."
-        say "e.g., import Logo from '@images/logo.svg'"
-        yes?("Would you like to enable SVGR? [y/N]")
+        say "Installing Superglue with:", :green
+        say "  Bundler:    #{@bundler} (#{bundler_source}; change with --bundler)"
+        if @use_typescript
+          say "  TypeScript: yes (#{typescript_source}; --no-typescript for JavaScript)"
+          say "  Validator:  #{@validator} (#{validator_source}; change with --validator=deepkit|typia or --no-validator)"
+        else
+          say "  TypeScript: no (--typescript to enable)"
+        end
+        say "  SVGR:       #{@use_svgr ? "yes (--no-svgr to disable)" : "no (--svgr to enable)"}"
+        say ""
       end
 
       def update_build_script
@@ -234,18 +355,19 @@ module Superglue
 
       def install_packages
         say "Installing Superglue and friends"
-        run "yarn add react react-dom @thoughtbot/superglue@^2.0.0-rc.1"
+        run "yarn add react react-dom @thoughtbot/superglue@^2.0.0-rc.3"
 
         if @use_typescript
-          run "yarn add -D @types/react-dom @types/react @types/node @thoughtbot/candy_wrapper@0.0.4 typescript"
+          typescript_dev_packages = ["@types/react-dom", "@types/react", "@types/node", "@thoughtbot/candy_wrapper@0.0.4", typescript_package]
+          run "yarn add -D #{typescript_dev_packages.compact.join(" ")}"
         end
 
         if @validator == "deepkit"
           say "Installing Deepkit for runtime type validation"
-          run "yarn add -D @deepkit/type @deepkit/core @deepkit/type-compiler"
+          run "yarn add -D @deepkit/core #{superglue_peer_packages("@deepkit/type", "@deepkit/type-compiler", "unplugin").join(" ")}"
         elsif @validator == "typia"
           say "Installing Typia and ttsc for runtime type validation"
-          run "yarn add -D typia ttsc @ttsc/unplugin"
+          run "yarn add -D #{superglue_peer_packages("typia", "ttsc", "@ttsc/unplugin").join(" ")}"
         end
 
         case @bundler
@@ -259,11 +381,8 @@ module Superglue
           say "Installing esbuild-loader for JSX support"
           run "yarn add -D esbuild-loader"
         when "rollup"
-          say "Installing rollup plugins for JSX and glob support"
-          run "yarn add -D @rollup/plugin-babel @babel/core @babel/preset-react @rollup/plugin-commonjs @rollup/plugin-alias @rollup/plugin-replace rollup-plugin-import-meta-glob"
-          if @use_typescript
-            run "yarn add -D @babel/preset-typescript"
-          end
+          say "Installing rollup plugins for JSX, TypeScript, and glob support"
+          run "yarn add -D rollup-plugin-esbuild esbuild @rollup/plugin-commonjs @rollup/plugin-alias @rollup/plugin-replace rollup-plugin-import-meta-glob"
         end
 
         say "Installing build dependencies"
@@ -338,6 +457,23 @@ module Superglue
         end
       end
 
+      def update_application_layout
+        layout_path = "app/views/layouts/application.html.erb"
+
+        inject_into_file layout_path, before: /^\s*<%= javascript_include_tag/ do
+          <<-ERB
+
+    <script type="text/javascript">
+      window.SUPERGLUE_INITIAL_PAGE_STATE=<%= render_props %>;<%# erblint:disable ErbSafety %>
+    </script>
+
+          ERB
+        end
+
+        inject_into_file layout_path, '<div id="app">', before: "<%= yield %>"
+        inject_into_file layout_path, "</div>", after: "<%= yield %>"
+      end
+
       def copy_ssr_files
         say "Adding ssr_context to ApplicationController"
         inject_into_file "app/controllers/application_controller.rb", after: "class ApplicationController < ActionController::Base\n" do
@@ -366,14 +502,14 @@ module Superglue
         when "rollup"
           copy_file "#{__dir__}/templates/ssr/rollup.build_ssr.config.js", "rollup.config.ssr.js"
           gsub_file "rollup.config.ssr.js", "server_rendering.jsx", "server_rendering.#{ssr_ext}"
-          if @use_typescript
-            gsub_file "rollup.config.ssr.js",
-              'presets: [["@babel/preset-react", { runtime: "automatic" }]],',
-              'presets: [["@babel/preset-react", { runtime: "automatic" }], "@babel/preset-typescript"],'
-          end
           run %(npm pkg set scripts.build:ssr="rollup -c rollup.config.ssr.js")
         end
 
+        if @validator != "none"
+          say "Adding #{@validator} plugin to SSR build"
+          add_validator_to_ssr_build
+        end
+
         if @use_typescript
           say "Copying server_rendering.tsx"
           copy_file "#{__dir__}/templates/ssr/server_rendering.tsx", "#{app_js_path}/server_rendering.tsx"
@@ -415,6 +551,52 @@ module Superglue
         end
       end
 
+      def add_validator_to_ssr_build
+        plugin_call = (@validator == "deepkit") ? "deepkitPlugin()" : "ttscPlugin()"
+        dev_only_plugin = "...(process.env.NODE_ENV === 'production' ? [] : [#{plugin_call}])"
+        plugin_import = ssr_validator_import
+
+        case @bundler
+        when "esbuild"
+          inject_into_file "build_ssr.mjs", plugin_import, after: "const importGlobPlugin = importGlob.default\n"
+          inject_into_file "build_ssr.mjs", "    #{dev_only_plugin},\n", after: "    importGlobPlugin(),\n"
+        when "bun"
+          inject_into_file "build_ssr.js", plugin_import, after: "import { globImportPlugin } from 'bun-plugin-glob-import'\n"
+          gsub_file "build_ssr.js",
+            "plugins: [globImportPlugin()],",
+            "plugins: [\n    globImportPlugin(),\n    #{dev_only_plugin}\n  ],"
+        when "webpack"
+          inject_into_file "webpack.config.ssr.js", plugin_import, after: "const webpack = require(\"webpack\")\n"
+          gsub_file "webpack.config.ssr.js", "    })\n  ]\n}", "    }),\n    #{dev_only_plugin}\n  ]\n}"
+        when "rollup"
+          inject_into_file "rollup.config.ssr.js", plugin_import, after: "import importMetaGlob from \"rollup-plugin-import-meta-glob\"\n"
+          # Before esbuild: the validator rewrites the TypeScript source and
+          # esbuild compiles its output. Rollup runs plugins in array order.
+          inject_into_file "rollup.config.ssr.js", "    #{dev_only_plugin},\n", before: "    esbuild({ jsx: \"automatic\" }),\n"
+        end
+      end
+
+      def ssr_validator_import
+        case [@validator, @bundler]
+        when ["deepkit", "esbuild"]
+          "import { esbuild as deepkitPlugin } from '@thoughtbot/superglue/deepkit'\n"
+        when ["deepkit", "bun"]
+          "import { bun as deepkitPlugin } from '@thoughtbot/superglue/deepkit'\n"
+        when ["deepkit", "webpack"]
+          "const { webpack: deepkitPlugin } = require(\"@thoughtbot/superglue/deepkit\")\n"
+        when ["deepkit", "rollup"]
+          "import { rollup as deepkitPlugin } from \"@thoughtbot/superglue/deepkit\"\n"
+        when ["typia", "esbuild"]
+          "import ttsc from '@ttsc/unplugin'\nconst ttscPlugin = ttsc.esbuild\n"
+        when ["typia", "bun"]
+          "import ttscPlugin from '@ttsc/unplugin/bun'\n"
+        when ["typia", "webpack"]
+          "const ttscPlugin = require(\"@ttsc/unplugin\").default.webpack\n"
+        when ["typia", "rollup"]
+          "import ttsc from \"@ttsc/unplugin\"\nconst ttscPlugin = ttsc.rollup\n"
+        end
+      end
+
       def configure_svgr
         say "Configuring SVGR"
 

data/lib/generators/superglue/install/templates/bun/bun.config.deepkit.js

@@ -8,6 +8,7 @@ const config = {
   entrypoints: ['app/javascript/application.tsx'],
   outdir: 'app/assets/builds',
   sourcemap: 'external',
+  jsx: { runtime: 'automatic' },
   plugins: [
     globImportPlugin(),
     ...(process.env.NODE_ENV === 'production' ? [] : [deepkitPlugin()])

data/lib/generators/superglue/install/templates/bun/bun.config.js

@@ -7,6 +7,7 @@ const config = {
   entrypoints: ['app/javascript/application.jsx'],
   outdir: 'app/assets/builds',
   sourcemap: 'external',
+  jsx: { runtime: 'automatic' },
   plugins: [globImportPlugin()],
 }
 

data/lib/generators/superglue/install/templates/bun/bun.config.ts.js

@@ -7,6 +7,7 @@ const config = {
   entrypoints: ['app/javascript/application.tsx'],
   outdir: 'app/assets/builds',
   sourcemap: 'external',
+  jsx: { runtime: 'automatic' },
   plugins: [globImportPlugin()],
 }
 

data/lib/generators/superglue/install/templates/bun/bun.config.typia.js

@@ -1,6 +1,6 @@
 import { globImportPlugin } from 'bun-plugin-glob-import'
-import ttsc from '@ttsc/unplugin'
-const ttscPlugin = ttsc.bun
+// Bun's adapter is its own entry point; the main export has no `bun`.
+import ttscPlugin from '@ttsc/unplugin/bun'
 import { watch } from 'fs'
 
 const isWatch = process.argv.includes('--watch')
@@ -9,6 +9,7 @@ const config = {
   entrypoints: ['app/javascript/application.tsx'],
   outdir: 'app/assets/builds',
   sourcemap: 'external',
+  jsx: { runtime: 'automatic' },
   plugins: [
     globImportPlugin(),
     ...(process.env.NODE_ENV === 'production' ? [] : [ttscPlugin()])

data/lib/generators/superglue/install/templates/bun/page_to_page_mapping.js

@@ -3,7 +3,7 @@ import { asObject as pages } from '../views/**/*.{tsx,jsx}'
 const pageIdentifierToPageComponent = {}
 
 for (const key in pages) {
-  const identifier = key.split('.')[0]
+  const identifier = key.replace('../views/', '').split('.')[0]
   pageIdentifierToPageComponent[identifier] = pages[key].default
 }
 

data/lib/generators/superglue/install/templates/bun/page_to_page_mapping.ts

@@ -3,7 +3,7 @@ import { asObject as pages } from '../views/**/*.{tsx,jsx}'
 const pageIdentifierToPageComponent: Record<string, React.ComponentType> = {}
 
 for (const key in pages) {
-  const identifier = key.split('.')[0]
+  const identifier = key.replace('../views/', '').split('.')[0]
   pageIdentifierToPageComponent[identifier] = (pages[key] as { default: React.ComponentType }).default
 }
 

data/lib/generators/superglue/install/templates/js/application.jsx

@@ -1,4 +1,3 @@
-import React from "react"
 import { createRoot, hydrateRoot } from "react-dom/client"
 import { createApp } from "@thoughtbot/superglue"
 import { buildVisitAndRemote } from "./application_visit"
@@ -27,13 +26,11 @@ if (typeof window !== "undefined" && window.SUPERGLUE_INITIAL_PAGE_STATE) {
       })
 
       const app = (
-        <div onClick={ujs.onClick} onSubmit={ujs.onSubmit}>
-          <Provider>
-            <Layout>
-              <Outlet />
-            </Layout>
-          </Provider>
-        </div>
+        <Provider>
+          <Layout onClick={ujs.onClick} onSubmit={ujs.onSubmit}>
+            <Outlet />
+          </Layout>
+        </Provider>
       )
 
       if (appEl.hasChildNodes()) {

data/lib/generators/superglue/install/templates/js/build.mjs

@@ -10,6 +10,7 @@ const buildOptions = {
     'app/javascript/application.jsx',
   ],
   bundle: true,
+  jsx: 'automatic',
   sourcemap: true,
   format: 'esm',
   outdir: 'app/assets/builds',

data/lib/generators/superglue/install/templates/js/inputs.jsx

@@ -7,7 +7,7 @@
  * There is no style and structured with bare necessities. You should modify
  * these components to fit your design needs.
  */
-import React, { createContext, useContext, useMemo } from 'react'
+import { createContext, useContext, useMemo } from 'react'
 export const ValidationContext = createContext({})
 export const useErrorMessage = (errorKey) => {
   const errors = useContext(ValidationContext)

data/lib/generators/superglue/install/templates/js/jsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
-    "baseUrl": ".", // Usually the root of your project
+    "jsx": "react-jsx",
     "paths": {
-      "@javascript/*": ["app/javascript/*"],
-      "@views/*": ["app/views/*"]
+      "@javascript/*": ["./app/javascript/*"],
+      "@views/*": ["./app/views/*"]
     }
   }
 }

data/lib/generators/superglue/install/templates/js/layout.jsx

@@ -1,11 +1,10 @@
-import React from 'react'
 import { useAppFlash } from '@javascript/flash'
 
-export const Layout = ({children}) => {
+export const Layout = ({children, onClick, onSubmit}) => {
   const flash = useAppFlash()
 
   return (
-    <div>
+    <div onClick={onClick} onSubmit={onSubmit}>
       {flash.success && <p>{flash.success}</p>}
       {flash.notice && <p>{flash.notice}</p>}
       {flash.error && <p>{flash.error}</p>}

data/lib/generators/superglue/install/templates/rollup/rollup.config.deepkit.js

@@ -1,7 +1,7 @@
 import path from "path"
 import resolve from "@rollup/plugin-node-resolve"
 import commonjs from "@rollup/plugin-commonjs"
-import babel from "@rollup/plugin-babel"
+import esbuild from "rollup-plugin-esbuild"
 import alias from "@rollup/plugin-alias"
 import importMetaGlob from "rollup-plugin-import-meta-glob"
 import { rollup as deepkitPlugin } from "@thoughtbot/superglue/deepkit"
@@ -21,17 +21,14 @@ export default {
         { find: "@views", replacement: path.resolve("app/views") }
       ]
     }),
-    resolve({ extensions: [".ts", ".tsx", ".js", ".jsx"] }),
+    // @deepkit/type imports "buffer"; bundle the npm polyfill instead of
+    // leaving it to a Node built-in the browser does not have.
+    resolve({ extensions: [".ts", ".tsx", ".js", ".jsx"], preferBuiltins: false }),
     commonjs(),
-    babel({
-      babelHelpers: "bundled",
-      presets: [
-        ["@babel/preset-react", { runtime: "automatic" }],
-        "@babel/preset-typescript"
-      ],
-      extensions: [".ts", ".tsx", ".js", ".jsx"]
-    }),
+    // Before esbuild: it rewrites the TypeScript source, and esbuild compiles
+    // its output (rollup runs plugins in order and ignores `enforce`).
+    ...(process.env.NODE_ENV === 'production' ? [] : [deepkitPlugin()]),
+    esbuild({ jsx: "automatic" }),
     importMetaGlob(),
-    ...(process.env.NODE_ENV === 'production' ? [] : [deepkitPlugin()])
   ]
 }

data/lib/generators/superglue/install/templates/rollup/rollup.config.js

@@ -1,7 +1,7 @@
 import path from "path"
 import resolve from "@rollup/plugin-node-resolve"
 import commonjs from "@rollup/plugin-commonjs"
-import babel from "@rollup/plugin-babel"
+import esbuild from "rollup-plugin-esbuild"
 import alias from "@rollup/plugin-alias"
 import importMetaGlob from "rollup-plugin-import-meta-glob"
 
@@ -22,11 +22,7 @@ export default {
     }),
     resolve({ extensions: [".js", ".jsx"] }),
     commonjs(),
-    babel({
-      babelHelpers: "bundled",
-      presets: [["@babel/preset-react", { runtime: "automatic" }]],
-      extensions: [".js", ".jsx"]
-    }),
+    esbuild({ jsx: "automatic" }),
     importMetaGlob(),
   ]
 }

data/lib/generators/superglue/install/templates/rollup/rollup.config.ts.js

@@ -1,7 +1,7 @@
 import path from "path"
 import resolve from "@rollup/plugin-node-resolve"
 import commonjs from "@rollup/plugin-commonjs"
-import babel from "@rollup/plugin-babel"
+import esbuild from "rollup-plugin-esbuild"
 import alias from "@rollup/plugin-alias"
 import importMetaGlob from "rollup-plugin-import-meta-glob"
 
@@ -22,14 +22,7 @@ export default {
     }),
     resolve({ extensions: [".ts", ".tsx", ".js", ".jsx"] }),
     commonjs(),
-    babel({
-      babelHelpers: "bundled",
-      presets: [
-        ["@babel/preset-react", { runtime: "automatic" }],
-        "@babel/preset-typescript"
-      ],
-      extensions: [".ts", ".tsx", ".js", ".jsx"]
-    }),
+    esbuild({ jsx: "automatic" }),
     importMetaGlob(),
   ]
 }