superglue 2.0.0.rc.2 → 2.0.0.rc.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f1f55d71343032c2ba77a23c74ae0af75e1e823c358b606b33c84af34bee88da
-  data.tar.gz: 0a2e8ad51c13e8467f06c88229a4f863aa7bd8d888228186ff10af6e2cc8179a
+  metadata.gz: d17162adf65950ea5d4ee63e82835d8893c7f532607206b8a9e5bce609547297
+  data.tar.gz: e18b77ee95528a871782d9cc5a296601fa3763f03ef162354b5b2b165a7455b6
 SHA512:
-  metadata.gz: 210c9b55e64faaac22fcc10b1e61bb5882a13d1ec2cd91bd6380002734f1d86f59e90af21cfa13daf0e071081ff1a7e5f4db255625b9bf3a587f4d0a4dd67839
-  data.tar.gz: 11034825a30df06cc80525daca022d66b14ac9b4fd5566656faf3cb29d09521290a45f4f83409d85272872e95d66733ba5e9766052fc72b234a7f96ff2186c1f
+  metadata.gz: 1a23f6f9263af4619a667d9eb6fc6722c04547821676499417eb4533353a038efe76d80cebde261f0d085e4bb160709b4198672f89fc32ad83e507ea7cd0b80e
+  data.tar.gz: 86a94adb38233d8f67aad33f79dd6be31c12fdc0249e2431c2af9bef852831c3f022fc3f5f356e054275749c200d8a58736b6861441035d6048b9a16af7180a2

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

@@ -10,8 +10,7 @@ module Superglue
       class_option :typescript,
         type: :boolean,
         required: false,
-        default: false,
-        desc: "Use typescript"
+        desc: "Use TypeScript. Skips interactive prompt."
 
       class_option :bundler,
         type: :string,
@@ -31,8 +30,8 @@ module Superglue
       def create_files
         remove_file "#{app_js_path}/application.js"
 
-        @use_typescript = options["typescript"]
         @bundler = ask_bundler
+        @use_typescript = ask_typescript
         @validator = @use_typescript ? ask_validator : "none"
         @use_svgr = ask_svgr
 
@@ -127,6 +126,16 @@ module Superglue
         ask("Which bundler are you using?", limited_to: BUNDLERS, default: detected)
       end
 
+      def ask_typescript
+        unless options["typescript"].nil?
+          say "TypeScript: #{options["typescript"] ? "enabled" : "disabled"}", :green
+          return options["typescript"]
+        end
+
+        say ""
+        yes?("Would you like to use TypeScript? [y/N]")
+      end
+
       def ask_validator
         if options["validator"]
           validator = options["validator"]
@@ -234,7 +243,7 @@ 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.2"
 
         if @use_typescript
           run "yarn add -D @types/react-dom @types/react @types/node @thoughtbot/candy_wrapper@0.0.4 typescript"
@@ -374,6 +383,11 @@ module Superglue
           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 +429,50 @@ 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"
+          inject_into_file "rollup.config.ssr.js", "    #{dev_only_plugin}\n", after: "    importMetaGlob(),\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 ttsc from '@ttsc/unplugin'\nconst ttscPlugin = ttsc.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

@@ -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/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"

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,5 +1,6 @@
 {
   "compilerOptions": {
+    "jsx": "react-jsx",
     "baseUrl": ".", // Usually the root of your project
     "paths": {
       "@javascript/*": ["app/javascript/*"],

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

@@ -1,4 +1,3 @@
-import React from 'react'
 import { useAppFlash } from '@javascript/flash'
 
 export const Layout = ({children}) => {

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/server_rendering.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { createApp } from "@thoughtbot/superglue";
 import { buildVisitAndRemote } from "./application_visit";
 import { pageIdentifierToPageComponent } from "./page_to_page_mapping";

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { createApp } from "@thoughtbot/superglue";
 import { buildVisitAndRemote } from "./application_visit";
 import { pageIdentifierToPageComponent } from "./page_to_page_mapping";

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";

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/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,4 +1,4 @@
-import React, {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 import { useAppFlash } from '@javascript/flash'
 
 export const Layout = ({children}: {children: ReactNode}) => {

data/lib/generators/superglue/install/templates/ts/tsconfig.json

@@ -7,7 +7,7 @@
     "strictPropertyInitialization": false,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "allowJs": false,
     "target": "ES2021",
     "allowSyntheticDefaultImports": true,

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/view_collection/templates/js/edit.html.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   Form,
   Layout,

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

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Form, Layout } from '@javascript/components'
 import { useContent } from '@thoughtbot/superglue'
 

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

@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   Form,
   Layout,

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

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Layout } from '@javascript/components'
 import { useContent } from '@thoughtbot/superglue'
 

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

@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   Form,
   FormProps,

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

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Form, FormProps, Layout } from '@javascript/components'
 import { useContent } from '@thoughtbot/superglue'
 

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

@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   Form,
   FormProps,

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

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Layout } from '@javascript/components'
 import { useContent } from '@thoughtbot/superglue'
 

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
@@ -46,7 +45,7 @@ module Superglue
 
       def append_mapping
         available_views.each do |action|
-          app_js = if options["typescript"]
+          app_js = if use_typescript?
             "#{app_js_path}/page_to_page_mapping.ts"
           else
             "#{app_js_path}/page_to_page_mapping.js"
@@ -54,7 +53,7 @@ module Superglue
 
           component_name = [plural_table_name, action].map(&:camelcase).join
 
-          js_ext = options["typescript"] ? "html.tsx" : "html.jsx"
+          js_ext = use_typescript? ? "html.tsx" : "html.jsx"
 
           if match_file(app_js, /pageIdentifierToPageComponent = {$/)
             prepend_to_file app_js do
@@ -72,6 +71,14 @@ module Superglue
 
       protected
 
+      def use_typescript?
+        if options["typescript"].nil?
+          File.exist?(File.join(destination_root, "tsconfig.json"))
+        else
+          options["typescript"]
+        end
+      end
+
       def js_component(attribute)
         case attribute.type
         when :string

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.3
 platform: ruby
 authors:
 - Johny Ho