wip

Author: jho406

.github/workflows/build_rails.yml

@@ -37,6 +37,8 @@ jobs:
         run: bundle exec rake test
       - name: Run acceptance test
         run: BUNDLE_GEMFILE='' ruby -Ilib:test test/acceptance/superglue_installation_acceptance.rb
+      - name: Run acceptance test w/ typescript
+        run: BUNDLE_GEMFILE='' ruby -Ilib:test test/acceptance/superglue_installation_acceptance.rb --typescript
       - name: Upload artifact
         if: always()
         uses: actions/upload-artifact@v4

lib/generators/superglue/install/install_generator.rb

@@ -43,7 +43,7 @@ def create_files
         run "yarn add react react-dom @reduxjs/toolkit react-redux @thoughtbot/superglue@2.0.0-alpha.8"
 
         if use_typescript
-          run "yarn add -D @types/react-dom @types/react @types/node @thoughtbot/candy_wrapper@0.0.4"
+          run "yarn add -D @types/react-dom @types/react @types/node @deepkit/type @deepkit/core @deepkit/type-compiler @thoughtbot/candy_wrapper@0.0.4 typescript"
         end
 
         say "Superglue is Installed! 🎉", :green
@@ -113,6 +113,12 @@ def copy_ts_files
 
         say "Copying tsconfig.json file to #{app_js_path}"
         copy_file "#{__dir__}/templates/ts/tsconfig.json", "tsconfig.json"
+
+        say "Copying esbuild plugin for Deepkit"
+        copy_file "#{__dir__}/templates/esbuild/plugin.js", "deepkit.mjs"
+
+        say "Adding build.mjs for TypeScript compilation"
+        copy_file "#{__dir__}/templates/build.mjs", "build.mjs"
       end
 
       def copy_js_files

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

@@ -0,0 +1,27 @@
+import * as esbuild from 'esbuild'
+import deepkitType from './deepkit.mjs'
+
+const isWatch = process.argv.includes('--watch')
+
+const buildOptions = {
+  entryPoints: [
+    'app/javascript/application.tsx',
+  ],
+  bundle: true,
+  sourcemap: true,
+  format: 'esm',
+  outdir: 'app/assets/builds',
+  publicPath: '/assets',
+  plugins:  process.env.NODE_ENV === 'production' ? [] : [deepkitType()] ,
+  metafile: true,
+  conditions: process.env.NODE_ENV === 'production' ? ['production'] : [],
+}
+
+if (isWatch) {
+  const ctx = await esbuild.context(buildOptions)
+  await ctx.watch()
+  console.log('Watching for changes...')
+} else {
+  const result = await esbuild.build(buildOptions)
+  console.log(await esbuild.analyzeMetafile(result.metafile))
+}

lib/generators/superglue/install/templates/esbuild/plugin.js

@@ -0,0 +1,43 @@
+import * as ts from "typescript";
+import { cwd } from "process";
+import { declarationTransformer, transformer } from "@deepkit/type-compiler";
+import { readFile } from "fs/promises";
+
+export default function deepkitType(options = {}){
+  return {
+    name: "Deepkit",
+    setup(build) {
+      const transformers = options.transformers || {
+        before: [transformer],
+        after: [declarationTransformer],
+      };
+
+      build.onLoad({ filter: /\.tsx?$/ }, async (args) => {
+        const configFilePath = options.tsConfig || cwd() + "/tsconfig.json";
+
+        const code = await readFile(args.path, { encoding: 'utf8' });
+        const transformed = ts.transpileModule(code, {
+          compilerOptions: Object.assign(
+            {
+              target: ts.ScriptTarget.ESNext,
+              module: ts.ModuleKind.ESNext,
+              sourceMap: false,
+              skipDefaultLibCheck: true,
+              skipLibCheck: true,
+              configFilePath,
+            },
+            options || {},
+          ),
+          fileName: args.path,
+          moduleName: args.namespace,
+          transformers,
+        });
+
+        return {
+          contents: transformed.outputText,
+          loader: args.path.endsWith('.tsx') ? 'tsx' : 'ts'
+        };
+      });
+    },
+  };
+}

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

@@ -28,6 +28,8 @@
 // }
 // ```
 //
-const pageIdentifierToPageComponent = {};
+const pageIdentifierToPageComponent = {
+  // Add your mappings here
+};
 
 export { pageIdentifierToPageComponent };

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

@@ -7,7 +7,7 @@
     "strictPropertyInitialization": false,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "jsx": "react",
+    "jsx": "preserve",
     "allowJs": false,
     "target": "ES2021",
     "allowSyntheticDefaultImports": true,
@@ -24,4 +24,5 @@
     "app/javascript/**/*",
     "app/views/**/*"
   ],
+  "reflection": true
 }

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

@@ -17,7 +17,7 @@ type ContentProps = {
   <%= js_plural_table_name %>Path: string
   <%= js_singular_table_name %>Form: FormProps<{
     <%- attributes.each do |attr| -%>
-    <%= attr.column_name.camelize(:lower)%>: <%= Railsjs_component(attr)%>Props
+    <%= attr.column_name.camelize(:lower)%>: Rails<%= js_component(attr)%>Props
     <%- end -%>
     submit: RailsSubmitButtonProps
   }>

test/acceptance/superglue_installation_acceptance.rb

@@ -3,15 +3,18 @@
 require "capybara/minitest"
 require "selenium-webdriver"
 require "git"
+require "byebug"
 
 ROOT_DIR = File.expand_path("../../../", __FILE__)
 TMP_DIR = File.join(ROOT_DIR, "tmp")
 SUPERGLUE_RAILS_PATH = ROOT_DIR
-SUPERGLUE_SUPERGLUE_PATH = File.join(ROOT_DIR, "superglue/superglue")
+SUPERGLUE_SUPERGLUE_PATH = File.join(ROOT_DIR, "../superglue/superglue")
 VERSION = File.read(File.expand_path("../../VERSION", __dir__)).strip
 
 SERVER_PORT = "3000"
 
+USE_TYPESCRIPT = ENV["USE_TYPESCRIPT"] == "1"
+
 Minitest.load_plugins
 
 class << Minitest
@@ -63,28 +66,28 @@ def update_package_json
   end
 
   def install_superglue
-    # Dir.chdir(ROOT_DIR) do
-    #   successfully "rm -rf ./superglue"
-    #   Git.clone("https://github.com/thoughtbot/superglue.git")
-    # end
-
-    # Dir.chdir(SUPERGLUE_SUPERGLUE_PATH) do
-    #   successfully "npm install"
-    #   successfully "npm run build"
-    #   successfully "npm pack"
-    # end
+    Dir.chdir(ROOT_DIR) do
+      successfully "rm -rf ./superglue"
+      Git.clone("https://github.com/thoughtbot/superglue.git", branch: "v2")
+    end
+
+    Dir.chdir(SUPERGLUE_SUPERGLUE_PATH) do
+      successfully "npm install"
+      successfully "npm run build"
+      successfully "npm pack"
+    end
     successfully "echo \"gem 'superglue', path: '#{SUPERGLUE_RAILS_PATH}'\" >> Gemfile"
     successfully "bundle install"
 
     FileUtils.rm_f("app/javascript/application.js")
 
-    successfully "bundle exec rails generate superglue:install"
-    # update_package_json
+    successfully "bundle exec rails generate superglue:install #{"--typescript" if USE_TYPESCRIPT}"
+    update_package_json
     successfully "yarn install --cache-folder /tmp/.junk; rm -rf /tmp/.junk"
   end
 
   def add_esbuild_cmd
-    build_script = "esbuild app/javascript/*.* --bundle --loader:.js=jsx --sourcemap --outdir=app/assets/builds --public-path=assets"
+    build_script = "node build.mjs"
     successfully %(npm pkg set scripts.build="#{build_script}")
   end
 
@@ -99,7 +102,7 @@ def generate_test_app_7(app_name)
   end
 
   def generate_scaffold
-    successfully "bundle exec rails generate superglue:scaffold post body:string --force"
+    successfully "bundle exec rails generate superglue:scaffold post body:string --force #{"--typescript" if USE_TYPESCRIPT}"
   end
 
   def reset_db