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

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/bun.build_ssr.js

@@ -7,6 +7,7 @@ const buildOptions = {
   entrypoints: ['app/javascript/server_rendering.jsx'],
   outdir: 'app/assets/builds',
   sourcemap: 'external',
+  jsx: { runtime: 'automatic' },
   target: 'browser',
   naming: 'server_rendering.js',
   define: {

data/lib/generators/superglue/install/templates/ssr/esbuild.build_ssr.mjs

@@ -8,6 +8,7 @@ const isWatch = process.argv.includes('--watch')
 const buildOptions = {
   entryPoints: ['app/javascript/server_rendering.jsx'],
   bundle: true,
+  jsx: 'automatic',
   sourcemap: true,
   outfile: 'app/assets/builds/server_rendering.js',
   platform: 'browser',

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

@@ -1,12 +1,12 @@
-import React from "react";
 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,
@@ -16,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

@@ -1,8 +1,8 @@
-import React from "react";
 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,
@@ -10,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,
@@ -20,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/ssr/webpack.build_ssr.js

@@ -15,7 +15,8 @@ module.exports = {
         exclude: /node_modules/,
         loader: "esbuild-loader",
         options: {
-          target: "es2020"
+          target: "es2020",
+          jsx: "automatic"
         }
       }
     ]

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { createRoot, hydrateRoot } from "react-dom/client";
 import { createApp, SaveResponse } from "@thoughtbot/superglue";
 import { buildVisitAndRemote } from "./application_visit";
@@ -32,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/build.deepkit.mjs

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

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

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

data/lib/generators/superglue/install/templates/ts/build.typia.mjs

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

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/inputs.tsx

@@ -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, ReactNode, useContext, useMemo } from "react";
+import { createContext, ReactNode, useContext, useMemo } from "react";
 
 export type {
   CheckboxField as RailsCheckboxFieldProps,

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

@@ -1,11 +1,12 @@
-import React, {ReactNode} from 'react'
+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

@@ -7,17 +7,16 @@
     "strictPropertyInitialization": false,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "allowJs": false,
     "target": "ES2021",
     "allowSyntheticDefaultImports": true,
     "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/install/templates/webpack/webpack.config.deepkit.js

@@ -15,7 +15,8 @@ module.exports = {
         exclude: /node_modules/,
         loader: "esbuild-loader",
         options: {
-          target: "es2020"
+          target: "es2020",
+          jsx: "automatic"
         }
       }
     ]

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

@@ -14,7 +14,8 @@ module.exports = {
         exclude: /node_modules/,
         loader: "esbuild-loader",
         options: {
-          target: "es2020"
+          target: "es2020",
+          jsx: "automatic"
         }
       }
     ]

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

@@ -14,7 +14,8 @@ module.exports = {
         exclude: /node_modules/,
         loader: "esbuild-loader",
         options: {
-          target: "es2020"
+          target: "es2020",
+          jsx: "automatic"
         }
       }
     ]

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

@@ -15,7 +15,8 @@ module.exports = {
         exclude: /node_modules/,
         loader: "esbuild-loader",
         options: {
-          target: "es2020"
+          target: "es2020",
+          jsx: "automatic"
         }
       }
     ]

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,7 +1,5 @@
-import React from 'react'
 import {
   Form,
-  Layout,
   <%- attributes.each do |attr| -%>
   <%= js_component(attr)%>,
   <%- end -%>
@@ -26,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 %>" />
@@ -36,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,5 +1,4 @@
-import React from 'react'
-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() {
@@ -38,7 +37,7 @@ export default function <%= js_plural_table_name(:upper) %>Index() {
   })
 
   return (
-    <Layout>
+    <>
       <h1><%= js_plural_table_name(:upper) %></h1>
 
       <table>
@@ -57,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,7 +1,5 @@
-import React from 'react'
 import {
   Form,
-  Layout,
   <%- attributes.each do |attr| -%>
   <%= js_component(attr)%>,
   <%- end -%>
@@ -25,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 %>" />
@@ -34,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,5 +1,3 @@
-import React from 'react'
-import { Layout } from '@javascript/components'
 import { useContent } from '@thoughtbot/superglue'
 
 export default function <%= js_plural_table_name(:upper) %>Show() {
@@ -12,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>
@@ -21,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,8 +1,6 @@
-import React from 'react'
 import {
   Form,
   FormProps,
-  Layout,
   <%- attributes.each do |attr| -%>
   <%= js_component(attr)%>,
   Rails<%= js_component(attr)%>Props,
@@ -40,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 %>" />
@@ -50,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,5 +1,4 @@
-import React from 'react'
-import { Form, FormProps, Layout } from '@javascript/components'
+import { Form, FormProps } from '@javascript/components'
 import { useContent } from '@thoughtbot/superglue'
 
 type ContentProps = {
@@ -53,7 +52,7 @@ export default function <%= js_plural_table_name(:upper) %>Index() {
   })
 
   return (
-    <Layout>
+    <>
       <h1><%= js_plural_table_name(:upper) %></h1>
 
       <table>
@@ -72,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,8 +1,6 @@
-import React from 'react'
 import {
   Form,
   FormProps,
-  Layout,
   <%- attributes.each do |attr| -%>
   <%= js_component(attr)%>,
   Rails<%= js_component(attr)%>Props,
@@ -37,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 %>" />
@@ -46,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,9 +1,7 @@
-import React from 'react'
-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 -%>
@@ -23,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>
@@ -32,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

@@ -13,8 +13,7 @@ module Superglue
       class_option :typescript,
         type: :boolean,
         required: false,
-        default: false,
-        desc: "Use typescript"
+        desc: "Use TypeScript. Defaults to true when tsconfig.json exists."
 
       def create_root_folder
         path = File.join("app/views", controller_file_path)
@@ -34,7 +33,7 @@ module Superglue
       def copy_js_files
         available_views.each do |view|
           @action_name = view
-          if options["typescript"]
+          if use_typescript?
             filename = filename_with_tsx_extensions(view)
             template "ts/" + filename, File.join("app/views", controller_file_path, filename)
           else
@@ -44,34 +43,16 @@ module Superglue
         end
       end
 
-      def append_mapping
-        available_views.each do |action|
-          app_js = if options["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 = options["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
+      protected
 
-            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
+      def use_typescript?
+        if options["typescript"].nil?
+          File.exist?(File.join(destination_root, "tsconfig.json"))
+        else
+          options["typescript"]
         end
       end
 
-      protected
-
       def js_component(attribute)
         case attribute.type
         when :string
@@ -124,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.2
+  version: 2.0.0.rc.4
 platform: ruby
 authors:
 - Johny Ho