superglue 2.0.0.rc.3 → 2.0.0.rc.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d17162adf65950ea5d4ee63e82835d8893c7f532607206b8a9e5bce609547297
-  data.tar.gz: e18b77ee95528a871782d9cc5a296601fa3763f03ef162354b5b2b165a7455b6
+  metadata.gz: aff506e09c15008bbc37ae8c5e14ce6c7ab0520956fd0f31653a3deb90a6e674
+  data.tar.gz: 9a3f7534e42d41ae13e08f496debbc3d692d085f99dc36875f6b047956a1eda4
 SHA512:
-  metadata.gz: 1a23f6f9263af4619a667d9eb6fc6722c04547821676499417eb4533353a038efe76d80cebde261f0d085e4bb160709b4198672f89fc32ad83e507ea7cd0b80e
-  data.tar.gz: 86a94adb38233d8f67aad33f79dd6be31c12fdc0249e2431c2af9bef852831c3f022fc3f5f356e054275749c200d8a58736b6861441035d6048b9a16af7180a2
+  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,31 +10,33 @@ module Superglue
 
       class_option :typescript,
         type: :boolean,
-        required: false,
-        desc: "Use TypeScript. Skips interactive prompt."
+        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"
 
-        @bundler = ask_bundler
-        @use_typescript = ask_typescript
-        @validator = @use_typescript ? ask_validator : "none"
-        @use_svgr = ask_svgr
+        resolve_choices
+        say_choices
 
         if @use_typescript
           copy_ts_files
@@ -59,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
 
@@ -101,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:"
@@ -122,48 +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
+
+      # 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
 
-        ask("Which bundler are you using?", limited_to: BUNDLERS, default: detected)
+        version.to_s[/\d+/]&.to_i
       end
 
-      def ask_typescript
-        unless options["typescript"].nil?
-          say "TypeScript: #{options["typescript"] ? "enabled" : "disabled"}", :green
-          return options["typescript"]
+      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 ""
-        yes?("Would you like to use TypeScript? [y/N]")
+      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
 
-      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
+      # --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
 
-        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 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
 
-      def ask_svgr
-        unless options["svgr"].nil?
-          say "SVGR: #{options["svgr"] ? "enabled" : "disabled"}", :green
-          return options["svgr"]
+      # 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
+
+      # 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
@@ -243,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.2"
+        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
@@ -268,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"
@@ -347,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
@@ -375,11 +502,6 @@ 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
 
@@ -448,7 +570,9 @@ module Superglue
           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"
-          inject_into_file "rollup.config.ssr.js", "    #{dev_only_plugin}\n", after: "    importMetaGlob(),\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
 
@@ -465,7 +589,7 @@ module Superglue
         when ["typia", "esbuild"]
           "import ttsc from '@ttsc/unplugin'\nconst ttscPlugin = ttsc.esbuild\n"
         when ["typia", "bun"]
-          "import ttsc from '@ttsc/unplugin'\nconst ttscPlugin = ttsc.bun\n"
+          "import ttscPlugin from '@ttsc/unplugin/bun'\n"
         when ["typia", "webpack"]
           "const ttscPlugin = require(\"@ttsc/unplugin\").default.webpack\n"
         when ["typia", "rollup"]

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')

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

@@ -26,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/jsconfig.json

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

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

@@ -1,10 +1,10 @@
 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(),
   ]
 }

data/lib/generators/superglue/install/templates/rollup/rollup.config.typia.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 ttsc from "@ttsc/unplugin"
@@ -24,15 +24,10 @@ 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"]
-    }),
+    // 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' ? [] : [ttscPlugin()]),
+    esbuild({ jsx: "automatic" }),
     importMetaGlob(),
-    ...(process.env.NODE_ENV === 'production' ? [] : [ttscPlugin()])
   ]
 }

data/lib/generators/superglue/install/templates/ssr/rollup.build_ssr.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 replace from "@rollup/plugin-replace"
 import importMetaGlob from "rollup-plugin-import-meta-glob"
@@ -29,14 +29,13 @@ export default {
     resolve({
       extensions: [".js", ".jsx", ".ts", ".tsx"],
       browser: true,
-      exportConditions: ["browser"]
+      exportConditions: ["browser"],
+      // Bundle npm polyfills (e.g. "buffer", imported by @deepkit/type)
+      // rather than Node built-ins, which MiniRacer does not have.
+      preferBuiltins: false
     }),
     commonjs(),
-    babel({
-      babelHelpers: "bundled",
-      presets: [["@babel/preset-react", { runtime: "automatic" }]],
-      extensions: [".js", ".jsx", ".ts", ".tsx"]
-    }),
+    esbuild({ jsx: "automatic" }),
     importMetaGlob(),
   ]
 }

data/lib/generators/superglue/install/templates/ssr/server_rendering.jsx

@@ -2,10 +2,11 @@ import { createApp } from "@thoughtbot/superglue";
 import { buildVisitAndRemote } from "./application_visit";
 import { pageIdentifierToPageComponent } from "./page_to_page_mapping";
 import { renderToString } from "react-dom/server";
+import { Layout } from "./components";
 
 setHumidRenderer((json, baseUrl, path) => {
   const initialState = JSON.parse(json);
-  const { Provider, Outlet } = createApp({
+  const { Provider, Outlet, ujs } = createApp({
     baseUrl,
     initialPage: initialState,
     path,
@@ -15,7 +16,9 @@ setHumidRenderer((json, baseUrl, path) => {
 
   return renderToString(
     <Provider>
-      <Outlet />
-    </Provider>,
+      <Layout onClick={ujs.onClick} onSubmit={ujs.onSubmit}>
+        <Outlet />
+      </Layout>
+    </Provider>
   );
 });

data/lib/generators/superglue/install/templates/ssr/server_rendering.tsx

@@ -2,6 +2,7 @@ import { createApp } from "@thoughtbot/superglue";
 import { buildVisitAndRemote } from "./application_visit";
 import { pageIdentifierToPageComponent } from "./page_to_page_mapping";
 import { renderToString } from "react-dom/server";
+import { Layout } from "./components";
 
 declare function setHumidRenderer(
   fn: (json: string, baseUrl: string, path: string) => string,
@@ -9,7 +10,7 @@ declare function setHumidRenderer(
 
 setHumidRenderer((json, baseUrl, path) => {
   const initialState = JSON.parse(json);
-  const { Provider, Outlet } = createApp({
+  const { Provider, Outlet, ujs } = createApp({
     baseUrl,
     initialPage: initialState,
     path,
@@ -19,7 +20,9 @@ setHumidRenderer((json, baseUrl, path) => {
 
   return renderToString(
     <Provider>
-      <Outlet />
+      <Layout onClick={ujs.onClick} onSubmit={ujs.onSubmit}>
+        <Outlet />
+      </Layout>
     </Provider>,
   );
 });

data/lib/generators/superglue/install/templates/ts/application.tsx

@@ -31,13 +31,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/ts/flash.ts

@@ -1,4 +1,5 @@
 import { useFlash } from "@thoughtbot/superglue";
+import type { ValidationErrors } from "@thoughtbot/candy_wrapper";
 
 /**
  * Customize this type to match the flash keys your application uses.
@@ -8,6 +9,8 @@ export type AppFlash = {
   notice?: string;
   alert?: string;
   error?: string;
+  // Form errors the scaffold stores under e.g. flash["postFormErrors"]
+  [key: `${string}FormErrors`]: ValidationErrors | undefined;
   [key: string]: unknown;
 };
 

data/lib/generators/superglue/install/templates/ts/layout.tsx

@@ -1,11 +1,12 @@
 import type { ReactNode } from 'react'
+import type { Handlers } from '@thoughtbot/superglue'
 import { useAppFlash } from '@javascript/flash'
 
-export const Layout = ({children}: {children: ReactNode}) => {
+export const Layout = ({children, onClick, onSubmit}: {children: ReactNode} & Partial<Handlers>) => {
   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/ts/tsconfig.json

@@ -14,10 +14,9 @@
     "esModuleInterop": true,
     "noEmit": true,
     "allowImportingTsExtensions": true,
-    "baseUrl": ".", // Usually the root of your project
     "paths": {
-      "@javascript/*": ["app/javascript/*"],
-      "@views/*": ["app/views/*"]
+      "@javascript/*": ["./app/javascript/*"],
+      "@views/*": ["./app/views/*"]
     },
     "types": ["node"]
   },

data/lib/generators/superglue/scaffold_controller/scaffold_controller_generator.rb

@@ -18,7 +18,7 @@ module Superglue
 
       class_option :helper, type: :boolean
       class_option :orm, banner: "NAME", type: :string, required: true,
-                         desc: "ORM to generate the controller for"
+        desc: "ORM to generate the controller for"
 
       class_option :skip_routes, type: :boolean, desc: "Don't add routes to config/routes.rb."
 
@@ -46,17 +46,17 @@ module Superglue
 
       private
 
-        def permitted_params
-          attachments, others = attributes_names.partition { |name| attachments?(name) }
-          params = others.map { |name| ":#{name}" }
-          params += attachments.map { |name| "#{name}: []" }
-          params.join(", ")
-        end
-
-        def attachments?(name)
-          attribute = attributes.find { |attr| attr.name == name }
-          attribute&.attachments?
-        end
+      def permitted_params
+        attachments, others = attributes_names.partition { |name| attachments?(name) }
+        params = others.map { |name| ":#{name}" }
+        params += attachments.map { |name| "#{name}: []" }
+        params.join(", ")
+      end
+
+      def attachments?(name)
+        attribute = attributes.find { |attr| attr.name == name }
+        attribute&.attachments?
+      end
     end
   end
 end

data/lib/generators/superglue/view_collection/templates/js/edit.html.jsx

@@ -1,6 +1,5 @@
 import {
   Form,
-  Layout,
   <%- attributes.each do |attr| -%>
   <%= js_component(attr)%>,
   <%- end -%>
@@ -25,7 +24,7 @@ export default function <%= js_plural_table_name(:upper) %>Edit() {
   const validationErrors = flash["<%= js_singular_table_name%>FormErrors"]
 
   return (
-    <Layout>
+    <>
       <Form {...form} extras={extras} validationErrors={validationErrors} data-sg-visit>
         <%- attributes.each do |attr| -%>
         <<%= js_component(attr)%> {...inputs.<%= attr.column_name.camelize(:lower)%>} label="<%= attr.column_name.humanize %>" errorKey="<%= attr.column_name %>" />
@@ -35,6 +34,6 @@ export default function <%= js_plural_table_name(:upper) %>Edit() {
 
       <a href={<%= js_singular_table_name %>Path} data-sg-visit>Show</a>
       <a href={<%= js_plural_table_name %>Path} data-sg-visit>Back</a>
-    </Layout>
+    </>
   )
 }

data/lib/generators/superglue/view_collection/templates/js/index.html.jsx

@@ -1,4 +1,4 @@
-import { Form, Layout } from '@javascript/components'
+import { Form } from '@javascript/components'
 import { useContent } from '@thoughtbot/superglue'
 
 export default function <%= js_plural_table_name(:upper) %>Index() {
@@ -37,7 +37,7 @@ export default function <%= js_plural_table_name(:upper) %>Index() {
   })
 
   return (
-    <Layout>
+    <>
       <h1><%= js_plural_table_name(:upper) %></h1>
 
       <table>
@@ -56,6 +56,6 @@ export default function <%= js_plural_table_name(:upper) %>Index() {
       </table>
       <br />
       <a href={new<%= js_singular_table_name(:upper) %>Path} data-sg-visit>New <%= singular_table_name.humanize %></a>
-    </Layout>
+    </>
   )
 }

data/lib/generators/superglue/view_collection/templates/js/new.html.jsx

@@ -1,6 +1,5 @@
 import {
   Form,
-  Layout,
   <%- attributes.each do |attr| -%>
   <%= js_component(attr)%>,
   <%- end -%>
@@ -24,7 +23,7 @@ export default function <%= js_plural_table_name(:upper) %>New() {
   const validationErrors = flash["<%= js_singular_table_name%>FormErrors"]
 
   return (
-    <Layout>
+    <>
       <Form {...form} extras={extras} validationErrors={validationErrors} data-sg-visit>
         <%- attributes.each do |attr| -%>
         <<%= js_component(attr)%> {...inputs.<%= attr.column_name.camelize(:lower)%>} label="<%= attr.column_name.humanize %>" errorKey="<%= attr.column_name %>" />
@@ -33,6 +32,6 @@ export default function <%= js_plural_table_name(:upper) %>New() {
       </Form>
 
       <a href={<%= js_plural_table_name %>Path} data-sg-visit>Back</a>
-    </Layout>
+    </>
   )
 }

data/lib/generators/superglue/view_collection/templates/js/show.html.jsx

@@ -1,4 +1,3 @@
-import { Layout } from '@javascript/components'
 import { useContent } from '@thoughtbot/superglue'
 
 export default function <%= js_plural_table_name(:upper) %>Show() {
@@ -11,7 +10,7 @@ export default function <%= js_plural_table_name(:upper) %>Show() {
   } = useContent()
 
   return (
-    <Layout>
+    <>
     <%- showable_attributes.each do |attr| -%>
       <p>
         <strong><%= attr.column_name.humanize %>:</strong>
@@ -20,6 +19,6 @@ export default function <%= js_plural_table_name(:upper) %>Show() {
     <%- end -%>
       <a href={ edit<%= js_singular_table_name(:upper) %>Path } data-sg-visit>Edit</a>
       <a href={ <%= js_plural_table_name %>Path } data-sg-visit>Back</a>
-    </Layout>
+    </>
   )
 }

data/lib/generators/superglue/view_collection/templates/ts/edit.html.tsx

@@ -1,7 +1,6 @@
 import {
   Form,
   FormProps,
-  Layout,
   <%- attributes.each do |attr| -%>
   <%= js_component(attr)%>,
   Rails<%= js_component(attr)%>Props,
@@ -39,7 +38,7 @@ export default function <%= js_plural_table_name(:upper) %>Edit() {
   const validationErrors = flash["<%= js_singular_table_name%>FormErrors"]
 
   return (
-    <Layout>
+    <>
       <Form {...form} extras={extras} validationErrors={validationErrors} data-sg-visit>
         <%- attributes.each do |attr| -%>
         <<%= js_component(attr)%> {...inputs.<%= attr.column_name.camelize(:lower)%>} label="<%= attr.column_name.humanize %>" errorKey="<%= attr.column_name %>" />
@@ -49,6 +48,6 @@ export default function <%= js_plural_table_name(:upper) %>Edit() {
 
       <a href={<%= js_singular_table_name %>Path} data-sg-visit>Show</a>
       <a href={<%= js_plural_table_name %>Path} data-sg-visit>Back</a>
-    </Layout>
+    </>
   )
 }

data/lib/generators/superglue/view_collection/templates/ts/index.html.tsx

@@ -1,4 +1,4 @@
-import { Form, FormProps, Layout } from '@javascript/components'
+import { Form, FormProps } from '@javascript/components'
 import { useContent } from '@thoughtbot/superglue'
 
 type ContentProps = {
@@ -52,7 +52,7 @@ export default function <%= js_plural_table_name(:upper) %>Index() {
   })
 
   return (
-    <Layout>
+    <>
       <h1><%= js_plural_table_name(:upper) %></h1>
 
       <table>
@@ -71,6 +71,6 @@ export default function <%= js_plural_table_name(:upper) %>Index() {
       </table>
       <br />
       <a href={new<%= js_singular_table_name(:upper) %>Path} data-sg-visit>New <%= singular_table_name.humanize %></a>
-    </Layout>
+    </>
   )
 }

data/lib/generators/superglue/view_collection/templates/ts/new.html.tsx

@@ -1,7 +1,6 @@
 import {
   Form,
   FormProps,
-  Layout,
   <%- attributes.each do |attr| -%>
   <%= js_component(attr)%>,
   Rails<%= js_component(attr)%>Props,
@@ -36,7 +35,7 @@ export default function <%= js_plural_table_name(:upper) %>New() {
   const validationErrors = flash["<%= js_singular_table_name%>FormErrors"]
 
   return (
-    <Layout>
+    <>
       <Form {...form} extras={extras} validationErrors={validationErrors} data-sg-visit>
         <%- attributes.each do |attr| -%>
         <<%= js_component(attr)%> {...inputs.<%= attr.column_name.camelize(:lower)%>} label="<%= attr.column_name.humanize %>" errorKey="<%= attr.column_name %>" />
@@ -45,6 +44,6 @@ export default function <%= js_plural_table_name(:upper) %>New() {
       </Form>
 
       <a href={<%= js_plural_table_name %>Path} data-sg-visit>Back</a>
-    </Layout>
+    </>
   )
 }

data/lib/generators/superglue/view_collection/templates/ts/show.html.tsx

@@ -1,8 +1,7 @@
-import { Layout } from '@javascript/components'
 import { useContent } from '@thoughtbot/superglue'
 
 type ContentProps = {
-  id: string
+  id: number
   <%- attributes.each do |attr| -%>
   <%= attr.column_name.camelize(:lower)%>: <%= json_mappable_type(attr)%>
   <%- end -%>
@@ -22,7 +21,7 @@ export default function <%= js_plural_table_name(:upper) %>Show() {
   } = useContent<ContentProps>()
 
   return (
-    <Layout>
+    <>
     <%- showable_attributes.each do |attr| -%>
       <p>
         <strong><%= attr.column_name.humanize %>:</strong>
@@ -31,6 +30,6 @@ export default function <%= js_plural_table_name(:upper) %>Show() {
     <%- end -%>
       <a href={ edit<%= js_singular_table_name(:upper) %>Path } data-sg-visit>Edit</a>
       <a href={ <%= js_plural_table_name %>Path } data-sg-visit>Back</a>
-    </Layout>
+    </>
   )
 }

data/lib/generators/superglue/view_collection/view_collection_generator.rb

@@ -43,32 +43,6 @@ module Superglue
         end
       end
 
-      def append_mapping
-        available_views.each do |action|
-          app_js = if use_typescript?
-            "#{app_js_path}/page_to_page_mapping.ts"
-          else
-            "#{app_js_path}/page_to_page_mapping.js"
-          end
-
-          component_name = [plural_table_name, action].map(&:camelcase).join
-
-          js_ext = use_typescript? ? "html.tsx" : "html.jsx"
-
-          if match_file(app_js, /pageIdentifierToPageComponent = {$/)
-            prepend_to_file app_js do
-              "import #{component_name} from '#{view_path}/#{controller_file_path}/#{action}.#{js_ext}'\n"
-            end
-
-            inject_into_file app_js, after: /pageIdentifierToPageComponent = {$/ do
-              "\n  '#{[controller_file_path, action].join("/")}': #{component_name},"
-            end
-          else
-            say "Skipping appending to #{app_js}, you may be using a bundler that supports globing."
-          end
-        end
-      end
-
       protected
 
       def use_typescript?
@@ -131,14 +105,6 @@ module Superglue
         %w[index edit show new]
       end
 
-      def view_path
-        "@views"
-      end
-
-      def app_js_path
-        "app/javascript"
-      end
-
       attr_reader :action_name
 
       def attributes_names

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: superglue
 version: !ruby/object:Gem::Version
-  version: 2.0.0.rc.3
+  version: 2.0.0.rc.4
 platform: ruby
 authors:
 - Johny Ho