superglue 2.0.0.beta.3 → 2.0.0.rc.1

data/lib/generators/superglue/install/templates/ssr/webpack.build_ssr.js

@@ -0,0 +1,40 @@
+const path = require("path")
+const webpack = require("webpack")
+
+module.exports = {
+  mode: "production",
+  devtool: "source-map",
+  target: "web",
+  entry: {
+    server_rendering: ["./app/javascript/server_rendering.jsx"]
+  },
+  module: {
+    rules: [
+      {
+        test: /\.[jt]sx?$/,
+        exclude: /node_modules/,
+        loader: "esbuild-loader",
+        options: {
+          target: "es2020"
+        }
+      }
+    ]
+  },
+  resolve: {
+    extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
+    alias: {
+      "@javascript": path.resolve(__dirname, "app/javascript"),
+      "@views": path.resolve(__dirname, "app/views")
+    }
+  },
+  output: {
+    filename: "[name].js",
+    sourceMapFilename: "[file].map",
+    path: path.resolve(__dirname, "app/assets/builds"),
+  },
+  plugins: [
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1
+    })
+  ]
+}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { createRoot } from "react-dom/client";
+import { createRoot, hydrateRoot } from "react-dom/client";
 import { createApp, SaveResponse } from "@thoughtbot/superglue";
 import { buildVisitAndRemote } from "./application_visit";
 import { pageIdentifierToPageComponent } from "./page_to_page_mapping";
@@ -31,16 +31,21 @@ if (typeof window !== "undefined" && window.SUPERGLUE_INITIAL_PAGE_STATE) {
         mapping: pageIdentifierToPageComponent,
       });
 
-      const root = createRoot(appEl);
-      root.render(
+      const app = (
         <div onClick={ujs.onClick} onSubmit={ujs.onSubmit}>
           <Provider>
             <Layout>
               <Outlet />
             </Layout>
           </Provider>
-        </div>,
+        </div>
       );
+
+      if (appEl.hasChildNodes()) {
+        hydrateRoot(appEl, app);
+      } else {
+        createRoot(appEl).render(app);
+      }
     }
   });
 }

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

@@ -1,4 +1,7 @@
 import * as esbuild from 'esbuild'
+import { watch } from 'fs'
+import { default as importGlob } from 'esbuild-plugin-import-glob'
+const importGlobPlugin = importGlob.default
 import { esbuild as deepkitPlugin } from '@thoughtbot/superglue/deepkit'
 
 const isWatch = process.argv.includes('--watch')
@@ -12,15 +15,23 @@ const buildOptions = {
   format: 'esm',
   outdir: 'app/assets/builds',
   publicPath: '/assets',
-  plugins: process.env.NODE_ENV === 'production' ? [] : [deepkitPlugin()],
+  plugins: process.env.NODE_ENV === 'production' ? [importGlobPlugin()] : [importGlobPlugin(), deepkitPlugin()],
   metafile: true,
   conditions: process.env.NODE_ENV === 'production' ? ['production'] : [],
 }
 
 if (isWatch) {
-  const ctx = await esbuild.context(buildOptions)
+  let ctx = await esbuild.context(buildOptions)
   await ctx.watch()
   console.log('Watching for changes...')
+
+  watch('app/views', { recursive: true }, async (event, filename) => {
+    if (event === 'rename' && /\.[jt]sx$/.test(filename)) {
+      await ctx.dispose()
+      ctx = await esbuild.context(buildOptions)
+      await ctx.watch()
+    }
+  })
 } else {
   const result = await esbuild.build(buildOptions)
   console.log(await esbuild.analyzeMetafile(result.metafile))

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

@@ -1,4 +1,7 @@
 import * as esbuild from 'esbuild'
+import { watch } from 'fs'
+import { default as importGlob } from 'esbuild-plugin-import-glob'
+const importGlobPlugin = importGlob.default
 
 const isWatch = process.argv.includes('--watch')
 
@@ -11,16 +14,24 @@ const buildOptions = {
   format: 'esm',
   outdir: 'app/assets/builds',
   publicPath: '/assets',
-  plugins: [],
+  plugins: [importGlobPlugin()],
   metafile: true,
   conditions: process.env.NODE_ENV === 'production' ? ['production'] : [],
 }
 
 if (isWatch) {
-  const ctx = await esbuild.context(buildOptions)
+  let ctx = await esbuild.context(buildOptions)
   await ctx.watch()
   console.log('Watching for changes...')
+
+  watch('app/views', { recursive: true }, async (event, filename) => {
+    if (event === 'rename' && /\.[jt]sx$/.test(filename)) {
+      await ctx.dispose()
+      ctx = await esbuild.context(buildOptions)
+      await ctx.watch()
+    }
+  })
 } else {
   const result = await esbuild.build(buildOptions)
   console.log(await esbuild.analyzeMetafile(result.metafile))
-}
+}

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

@@ -0,0 +1,39 @@
+import * as esbuild from 'esbuild'
+import { watch } from 'fs'
+import { default as importGlob } from 'esbuild-plugin-import-glob'
+const importGlobPlugin = importGlob.default
+import ttsc from '@ttsc/unplugin'
+const ttscPlugin = ttsc.esbuild
+
+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' ? [importGlobPlugin()] : [importGlobPlugin(), ttscPlugin()],
+  metafile: true,
+  conditions: process.env.NODE_ENV === 'production' ? ['production'] : [],
+}
+
+if (isWatch) {
+  let ctx = await esbuild.context(buildOptions)
+  await ctx.watch()
+  console.log('Watching for changes...')
+
+  watch('app/views', { recursive: true }, async (event, filename) => {
+    if (event === 'rename' && /\.[jt]sx$/.test(filename)) {
+      await ctx.dispose()
+      ctx = await esbuild.context(buildOptions)
+      await ctx.watch()
+    }
+  })
+} else {
+  const result = await esbuild.build(buildOptions)
+  console.log(await esbuild.analyzeMetafile(result.metafile))
+}

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

@@ -1,35 +1,13 @@
-// import your page component
-// e.g import PostsEdit from '../views/posts/edit'
+// @ts-ignore
+import * as pages from '../views/**/*.{tsx,jsx}'
 
-// Mapping between your props template to Component, you must add to this
-// to register any new page level component you create. If you are using the
-// scaffold, it will auto append the identifers for you.
-//
-// For example:
-//
-// const pageIdentifierToPageComponent =  {
-//   'posts/new': PostNew
-// };
-//
-//
-// If you are using a build tool that supports globbing, you can automatically
-// populate `pageIdentiferToPageComponent`. For example, if you are using vite,
-// you can use the following snippet instead of manually importing.
-//
-// ```
-// const pageIdentifierToPageComponent = {}
-// const pages = import.meta.glob('../views/**/*.tsx', {eager: true})
-//
-// for (const key in pages) {
-//   if (pages.hasOwnProperty(key)) {
-//     const identifier = key.replace("../views/", "").split('.')[0];
-//     pageIdentifierToPageComponent[identifier] = pages[key].default;
-//   }
-// }
-// ```
-//
-const pageIdentifierToPageComponent = {
-  // Add your mappings here
-};
+const pageIdentifierToPageComponent: Record<string, React.ComponentType> = {}
 
-export { pageIdentifierToPageComponent };
+for (let i = 0; i < pages.filenames.length; i++) {
+  const identifier = pages.filenames[i]
+    .replace('../views/', '')
+    .split('.')[0]
+  pageIdentifierToPageComponent[identifier] = pages.default[i].default
+}
+
+export { pageIdentifierToPageComponent }

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

@@ -13,6 +13,7 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "noEmit": true,
+    "allowImportingTsExtensions": true,
     "baseUrl": ".", // Usually the root of your project
     "paths": {
       "@javascript/*": ["app/javascript/*"],

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

@@ -1,5 +1,5 @@
 const pageIdentifierToPageComponent = {}
-const context = require.context('../views', true, /\.jsx$/)
+const context = require.context('../views', true, /\.[jt]sx$/)
 
 context.keys().forEach((key) => {
   const identifier = key.replace('./', '').split('.')[0]

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

@@ -1,5 +1,5 @@
 const pageIdentifierToPageComponent: Record<string, React.ComponentType> = {}
-const context = require.context('../views', true, /\.tsx$/)
+const context = require.context('../views', true, /\.[jt]sx$/)
 
 context.keys().forEach((key: string) => {
   const identifier = key.replace('./', '').split('.')[0]

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

@@ -0,0 +1,42 @@
+const path = require("path")
+const webpack = require("webpack")
+const ttscPlugin = require("@ttsc/unplugin").default.webpack
+
+module.exports = {
+  mode: "production",
+  devtool: "source-map",
+  entry: {
+    application: "./app/javascript/application.tsx"
+  },
+  module: {
+    rules: [
+      {
+        test: /\.[jt]sx?$/,
+        exclude: /node_modules/,
+        loader: "esbuild-loader",
+        options: {
+          target: "es2020"
+        }
+      }
+    ]
+  },
+  resolve: {
+    extensions: [".tsx", ".ts", ".jsx", ".js", ".json", ".wasm"],
+    alias: {
+      "@javascript": path.resolve(__dirname, "app/javascript"),
+      "@views": path.resolve(__dirname, "app/views")
+    }
+  },
+  output: {
+    filename: "[name].js",
+    sourceMapFilename: "[file].map",
+    chunkFormat: "module",
+    path: path.resolve(__dirname, "app/assets/builds"),
+  },
+  plugins: [
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1
+    }),
+    ...(process.env.NODE_ENV === 'production' ? [] : [ttscPlugin()])
+  ]
+}

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

@@ -27,9 +27,6 @@ module Superglue
       def create_controller_files
         controller_file = File.join("app/controllers", controller_class_path, "#{controller_file_name}_controller.rb")
         template "controller.rb", controller_file
-        inject_into_file controller_file, after: /ApplicationController$/ do
-          "\n  before_action :use_jsx_rendering_defaults"
-        end
       end
 
       # Replaces template_engine (and its default erb), with view_collection

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

@@ -54,9 +54,11 @@ module Superglue
 
           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}'\n"
+              "import #{component_name} from '#{view_path}/#{controller_file_path}/#{action}.#{js_ext}'\n"
             end
 
             inject_into_file app_js, after: /pageIdentifierToPageComponent = {$/ do
@@ -141,11 +143,11 @@ module Superglue
       end
 
       def filename_with_jsx_extensions(name)
-        [name, :jsx].join(".")
+        [name, :html, :jsx].join(".")
       end
 
       def filename_with_tsx_extensions(name)
-        [name, :tsx].join(".")
+        [name, :html, :tsx].join(".")
       end
 
       def filename_with_html_extensions(name)

data/lib/superglue/engine.rb

@@ -41,13 +41,34 @@ module Superglue
         next if self != ActionController::Base
 
         include Controller
-
-        prepend_view_path(
-          Superglue::Resolver.new(Rails.root.join("app/views"))
-        )
       end
     end
 
+    initializer "superglue.template_handlers" do
+      handler = ->(template, source) {
+        if template.format == :html
+          <<~RUBY
+            controller.instance_variable_set(:@_active_template_virtual_path, "#{template.virtual_path}")
+            ctx = controller._ssr_context_block&.call
+            if ctx
+              controller.response.set_header("X-Superglue-SSR", "1")
+              render(partial: "humid", locals: { ssr_context: ctx }).strip.html_safe
+            else
+              if Rails.env.local?
+                Rails.logger.warn "[Superglue] #{template.virtual_path}.html.#{template.handler} rendered without SSR. Set ssr_context in your controller to enable it."
+              end
+              ""
+            end
+          RUBY
+        else
+          "''"
+        end
+      }
+
+      ActionView::Template.register_template_handler :tsx, handler
+      ActionView::Template.register_template_handler :jsx, handler
+    end
+
     initializer "superglue.helpers" do
       ActiveSupport.on_load(:action_controller) do
         helper Superglue::StreamsHelper

data/lib/superglue/rendering.rb

@@ -2,92 +2,31 @@ require "active_support/concern"
 
 module Superglue
   module Rendering
-    class UnsupportedOption < StandardError; end
-
     extend ActiveSupport::Concern
 
     included do |base|
-      base.class_attribute :_superglue_template, instance_accessor: true, default: "application/superglue"
+      base.class_attribute :_ssr_context_block, instance_accessor: true, default: nil
     end
 
     class_methods do
-      def superglue_template(template)
-        self._superglue_template = template
+      def ssr_context(&block)
+        self._ssr_context_block = block
       end
     end
 
-    def _render_template(options = {})
-      if @_capture_options_before_render
-        @_capture_options_before_render = false
-
-        if options.keys.intersect? [:file, :partial, :body, :plain, :html, :inline]
-          raise UnsupportedOption.new("`template:` and `action:` are the only options supported with `use_jsx_rendering_defaults`")
-        end
-
-        @_render_options = options
-        _ensure_react_page!(options[:template], options[:prefixes]) if request.format.html?
-
-        target_template_exists = template_exists?(options[:template], options[:prefixes], false)
-
-        if request.format.html? && !target_template_exists
-          # this uses the default superglue html template, which is super basic so
-          # we don't' need to create a separate one for each view
-          super(options.merge(
-            template: _superglue_template,
-            prefixes: []
-          ))
-        elsif request.format.json? && !target_template_exists
-          # This fixes an issue with rendering json direclty but teh template doesn't exist
-          # we still want ot see the layout rendered
-          super(options.merge(
-            inline: "",
-            layout: _layout_for_option(true)
-          ))
-        else
-          super
-        end
+    def default_render
+      if request.format.json? && !template_exists?(action_name, _prefixes, false)
+        render inline: "", layout: true
       else
         super
       end
     end
 
-    def render(...)
-      if _jsx_defaults
-        @_capture_options_before_render = true
-      end
-
+    def _render_template(options = {})
+      @_render_options ||= options
       super
     end
 
-    def use_jsx_rendering_defaults
-      @_use_jsx_rendering_defaults = true
-    end
-
-    def _jsx_defaults
-      @_use_jsx_rendering_defaults && (request.format.html? || request.format.json?)
-    end
-
-    def _props_defaults
-      @_use_jsx_rendering_defaults && request.format.json?
-    end
-
-    def _ensure_react_page!(template, prefixes)
-      found_template = lookup_context.find(template, prefixes, false, [], formats: [], handlers: [], variants: [], locale: [])
-      ## This variable was created for props_template to pick up
-      @_active_template_virtual_path = found_template.virtual_path
-      found_template
-    rescue ActionView::MissingTemplate => e
-      raise ActionView::MissingTemplate.new(e.paths, e.path, e.prefixes, e.partial, "extension JSX or TSX")
-    end
-
-    def default_render
-      if _jsx_defaults
-        render
-      else
-        super
-      end
-    end
-
     def render_props
       if @_render_options
         options = @_render_options

data/lib/superglue.rb

@@ -1,9 +1,9 @@
 require 'superglue/helpers'
 require 'superglue/rendering'
-require 'superglue/resolver'
 require 'superglue/engine'
 require 'props_template'
 require 'form_props'
+require 'humid'
 
 module Superglue
   extend ActiveSupport::Autoload

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: superglue
 version: !ruby/object:Gem::Version
-  version: 2.0.0.beta.3
+  version: 2.0.0.rc.1
 platform: ruby
 authors:
 - Johny Ho
@@ -15,7 +15,7 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '7.2'
+        version: '8.0'
     - - "<"
       - !ruby/object:Gem::Version
         version: '9.0'
@@ -25,7 +25,7 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '7.2'
+        version: '8.0'
     - - "<"
       - !ruby/object:Gem::Version
         version: '9.0'
@@ -57,6 +57,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '0.2'
+- !ruby/object:Gem::Dependency
+  name: humid
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.1'
 description: Rails integration for SuperglueJS
 email: jho406@gmail.com
 executables: []
@@ -71,6 +85,7 @@ files:
 - app/jobs/superglue/streams/action_broadcast_job.rb
 - app/jobs/superglue/streams/broadcast_stream_job.rb
 - app/models/concerns/superglue/broadcastable.rb
+- app/views/application/_humid.html.erb
 - app/views/superglue/layouts/_stream_message.json.props
 - app/views/superglue/layouts/stream.json.props
 - lib/generators/superglue/install/install_generator.rb
@@ -78,9 +93,10 @@ files:
 - lib/generators/superglue/install/templates/bun/bun.config.deepkit.js
 - lib/generators/superglue/install/templates/bun/bun.config.js
 - lib/generators/superglue/install/templates/bun/bun.config.ts.js
+- lib/generators/superglue/install/templates/bun/bun.config.typia.js
 - lib/generators/superglue/install/templates/bun/page_to_page_mapping.js
 - lib/generators/superglue/install/templates/bun/page_to_page_mapping.ts
-- lib/generators/superglue/install/templates/erb/superglue.html.erb
+- lib/generators/superglue/install/templates/humid_initializer.rb
 - lib/generators/superglue/install/templates/initializer.rb
 - lib/generators/superglue/install/templates/js/application.jsx
 - lib/generators/superglue/install/templates/js/application_visit.js
@@ -96,11 +112,20 @@ files:
 - lib/generators/superglue/install/templates/rollup/rollup.config.deepkit.js
 - lib/generators/superglue/install/templates/rollup/rollup.config.js
 - lib/generators/superglue/install/templates/rollup/rollup.config.ts.js
+- lib/generators/superglue/install/templates/rollup/rollup.config.typia.js
+- lib/generators/superglue/install/templates/ssr/bun.build_ssr.js
+- lib/generators/superglue/install/templates/ssr/esbuild.build_ssr.mjs
+- lib/generators/superglue/install/templates/ssr/rollup.build_ssr.config.js
+- lib/generators/superglue/install/templates/ssr/server_rendering.jsx
+- lib/generators/superglue/install/templates/ssr/server_rendering.tsx
+- lib/generators/superglue/install/templates/ssr/shim.js
+- lib/generators/superglue/install/templates/ssr/webpack.build_ssr.js
 - lib/generators/superglue/install/templates/stream.json.props
 - lib/generators/superglue/install/templates/ts/application.tsx
 - lib/generators/superglue/install/templates/ts/application_visit.ts
 - lib/generators/superglue/install/templates/ts/build.deepkit.mjs
 - lib/generators/superglue/install/templates/ts/build.mjs
+- lib/generators/superglue/install/templates/ts/build.typia.mjs
 - lib/generators/superglue/install/templates/ts/components.ts
 - lib/generators/superglue/install/templates/ts/flash.ts
 - lib/generators/superglue/install/templates/ts/inputs.tsx
@@ -112,27 +137,27 @@ files:
 - lib/generators/superglue/install/templates/webpack/webpack.config.deepkit.js
 - lib/generators/superglue/install/templates/webpack/webpack.config.js
 - lib/generators/superglue/install/templates/webpack/webpack.config.ts.js
+- lib/generators/superglue/install/templates/webpack/webpack.config.typia.js
 - lib/generators/superglue/scaffold/scaffold_generator.rb
 - lib/generators/superglue/scaffold_controller/scaffold_controller_generator.rb
-- lib/generators/superglue/view_collection/templates/js/edit.jsx
-- lib/generators/superglue/view_collection/templates/js/index.jsx
-- lib/generators/superglue/view_collection/templates/js/new.jsx
-- lib/generators/superglue/view_collection/templates/js/show.jsx
+- lib/generators/superglue/view_collection/templates/js/edit.html.jsx
+- lib/generators/superglue/view_collection/templates/js/index.html.jsx
+- lib/generators/superglue/view_collection/templates/js/new.html.jsx
+- lib/generators/superglue/view_collection/templates/js/show.html.jsx
 - lib/generators/superglue/view_collection/templates/props/_form.json.props
 - lib/generators/superglue/view_collection/templates/props/edit.json.props
 - lib/generators/superglue/view_collection/templates/props/index.json.props
 - lib/generators/superglue/view_collection/templates/props/new.json.props
 - lib/generators/superglue/view_collection/templates/props/show.json.props
-- lib/generators/superglue/view_collection/templates/ts/edit.tsx
-- lib/generators/superglue/view_collection/templates/ts/index.tsx
-- lib/generators/superglue/view_collection/templates/ts/new.tsx
-- lib/generators/superglue/view_collection/templates/ts/show.tsx
+- lib/generators/superglue/view_collection/templates/ts/edit.html.tsx
+- lib/generators/superglue/view_collection/templates/ts/index.html.tsx
+- lib/generators/superglue/view_collection/templates/ts/new.html.tsx
+- lib/generators/superglue/view_collection/templates/ts/show.html.tsx
 - lib/generators/superglue/view_collection/view_collection_generator.rb
 - lib/superglue.rb
 - lib/superglue/engine.rb
 - lib/superglue/helpers.rb
 - lib/superglue/rendering.rb
-- lib/superglue/resolver.rb
 homepage: https://github.com/thoughtbot/superglue_rails/
 licenses:
 - MIT

data/lib/generators/superglue/install/templates/erb/superglue.html.erb

@@ -1,5 +0,0 @@
-<script type="text/javascript">
-  window.SUPERGLUE_INITIAL_PAGE_STATE=<%= render_props %>;<%# erblint:disable ErbSafety %>
-</script>
-
-<div id="app"></div>