superglue 2.0.0.alpha.10 → 2.0.0.beta.2

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

@@ -1,50 +1,18 @@
-import { createSlice } from "@reduxjs/toolkit";
-import { receiveResponse, beforeVisit } from "@thoughtbot/superglue";
+import { useFlash } from "@thoughtbot/superglue";
 
-type FlashState = Record<string, any>;
+/**
+ * Customize this type to match the flash keys your application uses.
+ */
+export type AppFlash = {
+  success?: string;
+  notice?: string;
+  alert?: string;
+  error?: string;
+  [key: string]: unknown;
+};
 
-const initialState: FlashState = {};
-
-export const flashSlice = createSlice({
-  name: "flash",
-  initialState: initialState,
-  reducers: {
-    clearFlash(state, { payload }: { payload: string }) {
-      const key = payload;
-      if (!key) {
-        return {};
-      }
-
-      delete state[key];
-
-      return {
-        ...state,
-      };
-    },
-    flash(state, { payload }) {
-      return {
-        ...state,
-        ...payload,
-      };
-    },
-  },
-  extraReducers: (builder) => {
-    builder.addCase(beforeVisit, (_state, _action) => {
-      return {};
-    });
-    builder.addCase(receiveResponse, (state, action) => {
-      const { response } = action.payload;
-
-      if (response.slices) {
-        return {
-          ...state,
-          ...(response.slices.flash as FlashState),
-        };
-      } else {
-        return state;
-      }
-    });
-  },
-});
-
-export const { clearFlash, flash } = flashSlice.actions;
+/**
+ * A typed wrapper around useFlash. Returns flash narrowed to
+ * your application's flash shape.
+ */
+export const useAppFlash = () => useFlash<AppFlash>();

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

@@ -1,8 +1,8 @@
 import React, {ReactNode} from 'react'
-import { useAppSelector } from '@javascript/store'
+import { useAppFlash } from '@javascript/flash'
 
 export const Layout = ({children}: {children: ReactNode}) => {
-  const flash = useAppSelector((state) => state.flash)
+  const flash = useAppFlash()
 
   return (
     <div>

data/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 };

data/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,
@@ -23,5 +23,5 @@
   "include": [
     "app/javascript/**/*",
     "app/views/**/*"
-  ],
+  ]
 }

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

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

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

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

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

@@ -0,0 +1,42 @@
+const path = require("path")
+const webpack = require("webpack")
+const { webpack: deepkitPlugin } = require("@thoughtbot/superglue/deepkit")
+
+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' ? [] : [deepkitPlugin()])
+  ]
+}

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

@@ -0,0 +1,40 @@
+const path = require("path")
+const webpack = require("webpack")
+
+module.exports = {
+  mode: "production",
+  devtool: "source-map",
+  entry: {
+    application: "./app/javascript/application.jsx"
+  },
+  module: {
+    rules: [
+      {
+        test: /\.[jt]sx?$/,
+        exclude: /node_modules/,
+        loader: "esbuild-loader",
+        options: {
+          target: "es2020"
+        }
+      }
+    ]
+  },
+  resolve: {
+    extensions: [".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
+    })
+  ]
+}

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

@@ -0,0 +1,40 @@
+const path = require("path")
+const webpack = require("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
+    })
+  ]
+}

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

@@ -8,7 +8,7 @@ import {
   SubmitButton
 } from '@javascript/components'
 import { useContent } from '@thoughtbot/superglue'
-import { useAppSelector } from '@javascript/store'
+import { useAppFlash } from '@javascript/flash'
 
 export default function <%= js_plural_table_name(:upper) %>Edit() {
   const {
@@ -17,12 +17,13 @@ export default function <%= js_plural_table_name(:upper) %>Edit() {
     <%= js_plural_table_name %>Path,
   } = useContent()
 
-  const { 
-    inputs, 
-    form, 
-    extras 
+  const {
+    inputs,
+    form,
+    extras
   } = <%= js_singular_table_name %>Form
-  const validationErrors = useAppSelector((state) => state.flash["<%= js_singular_table_name%>FormErrors"])
+  const flash = useAppFlash()
+  const validationErrors = flash["<%= js_singular_table_name%>FormErrors"]
 
   return (
     <Layout>

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

@@ -1,6 +1,6 @@
 import React from 'react'
-import { 
-  Form, 
+import {
+  Form,
   Layout,
   <%- attributes.each do |attr| -%>
   <%= js_component(attr)%>,
@@ -8,7 +8,7 @@ import {
   SubmitButton
 } from '@javascript/components'
 import { useContent } from '@thoughtbot/superglue'
-import { useAppSelector } from '@javascript/store'
+import { useAppFlash } from '@javascript/flash'
 
 export default function <%= js_plural_table_name(:upper) %>New() {
   const {
@@ -16,12 +16,13 @@ export default function <%= js_plural_table_name(:upper) %>New() {
     <%= js_plural_table_name %>Path
   } = useContent()
 
-  const { 
-    inputs, 
-    form, 
-    extras 
+  const {
+    inputs,
+    form,
+    extras
   } = <%= js_singular_table_name %>Form
-  const validationErrors = useAppSelector((state) => state.flash["<%= js_singular_table_name%>FormErrors"])
+  const flash = useAppFlash()
+  const validationErrors = flash["<%= js_singular_table_name%>FormErrors"]
 
   return (
     <Layout>

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

@@ -1,6 +1,6 @@
 import React from 'react'
-import { 
-  Form, 
+import {
+  Form,
   FormProps,
   Layout,
   <%- attributes.each do |attr| -%>
@@ -11,7 +11,7 @@ import {
   RailsSubmitButtonProps
 } from '@javascript/components'
 import { useContent } from '@thoughtbot/superglue'
-import { useAppSelector } from '@javascript/store'
+import { useAppFlash } from '@javascript/flash'
 
 type ContentProps = {
   <%= js_singular_table_name %>Path: string
@@ -31,12 +31,13 @@ export default function <%= js_plural_table_name(:upper) %>Edit() {
     <%= js_plural_table_name %>Path,
   } = useContent<ContentProps>()
 
-  const { 
-    inputs, 
-    form, 
-    extras 
+  const {
+    inputs,
+    form,
+    extras
   } = <%= js_singular_table_name %>Form
-  const validationErrors = useAppSelector((state) => state.flash["<%= js_singular_table_name%>FormErrors"])
+  const flash = useAppFlash()
+  const validationErrors = flash["<%= js_singular_table_name%>FormErrors"]
 
   return (
     <Layout>

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

@@ -1,6 +1,6 @@
 import React from 'react'
-import { 
-  Form, 
+import {
+  Form,
   FormProps,
   Layout,
   <%- attributes.each do |attr| -%>
@@ -11,13 +11,13 @@ import {
   RailsSubmitButtonProps
 } from '@javascript/components'
 import { useContent } from '@thoughtbot/superglue'
-import { useAppSelector } from '@javascript/store'
+import { useAppFlash } from '@javascript/flash'
 
 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
   }>
@@ -28,12 +28,13 @@ export default function <%= js_plural_table_name(:upper) %>New() {
     <%= js_singular_table_name %>Form,
     <%= js_plural_table_name %>Path,
   } = useContent<ContentProps>()
-  const { 
-    inputs, 
-    form, 
-    extras 
+  const {
+    inputs,
+    form,
+    extras
   } = <%= js_singular_table_name %>Form
-  const validationErrors = useAppSelector((state) => state.flash["<%= js_singular_table_name%>FormErrors"])
+  const flash = useAppFlash()
+  const validationErrors = flash["<%= js_singular_table_name%>FormErrors"]
 
   return (
     <Layout>

data/lib/superglue/engine.rb

@@ -41,7 +41,6 @@ module Superglue
         next if self != ActionController::Base
 
         include Controller
-        include Superglue::RequestIdTracking
 
         prepend_view_path(
           Superglue::Resolver.new(Rails.root.join("app/views"))

data/lib/superglue/rendering.rb

@@ -25,14 +25,24 @@ module Superglue
         end
 
         @_render_options = options
-        _ensure_react_page!(options[:template], options[:prefixes])
+        _ensure_react_page!(options[:template], options[:prefixes]) if request.format.html?
 
-        html_template_exist = template_exists?(options[:template], options[:prefixes], false)
-        if !html_template_exist
+        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
@@ -54,7 +64,11 @@ module Superglue
     end
 
     def _jsx_defaults
-      @_use_jsx_rendering_defaults && request.format.html?
+      @_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)

data/lib/superglue.rb

@@ -10,8 +10,6 @@ module Superglue
 
   mattr_accessor :draw_routes, default: true
 
-  thread_mattr_accessor :current_request_id
-
   class << self
     attr_writer :signed_stream_verifier_key
 
@@ -26,13 +24,5 @@ module Superglue
     def signed_stream_verifier_key
       @signed_stream_verifier_key or raise ArgumentError, 'Superglue requires a signed_stream_verifier_key'
     end
-
-    def with_request_id(request_id)
-      old_request_id = current_request_id
-      self.current_request_id = request_id
-      yield
-    ensure
-      self.current_request_id = old_request_id
-    end
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: superglue
 version: !ruby/object:Gem::Version
-  version: 2.0.0.alpha.10
+  version: 2.0.0.beta.2
 platform: ruby
 authors:
 - Johny Ho
@@ -35,14 +35,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.0.0.alpha
+        version: 1.0.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.0.0.alpha
+        version: 1.0.0
 - !ruby/object:Gem::Dependency
   name: form_props
   requirement: !ruby/object:Gem::Requirement
@@ -67,38 +67,51 @@ files:
 - app/channels/superglue/streams/broadcasts.rb
 - app/channels/superglue/streams/stream_name.rb
 - app/channels/superglue/streams_channel.rb
-- app/controllers/concerns/superglue/request_id_tracking.rb
 - app/helpers/superglue/streams_helper.rb
 - app/jobs/superglue/streams/action_broadcast_job.rb
 - app/jobs/superglue/streams/broadcast_stream_job.rb
 - app/models/concerns/superglue/broadcastable.rb
-- app/models/superglue/debouncer.rb
-- app/models/superglue/thread_debouncer.rb
 - app/views/superglue/layouts/_stream_message.json.props
 - app/views/superglue/layouts/stream.json.props
 - lib/generators/superglue/install/install_generator.rb
 - lib/generators/superglue/install/templates/application.json.props
+- 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/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/initializer.rb
 - lib/generators/superglue/install/templates/js/application.jsx
 - lib/generators/superglue/install/templates/js/application_visit.js
+- lib/generators/superglue/install/templates/js/build.mjs
 - lib/generators/superglue/install/templates/js/components.js
 - lib/generators/superglue/install/templates/js/flash.js
 - lib/generators/superglue/install/templates/js/inputs.jsx
 - lib/generators/superglue/install/templates/js/jsconfig.json
 - lib/generators/superglue/install/templates/js/layout.jsx
 - lib/generators/superglue/install/templates/js/page_to_page_mapping.js
-- lib/generators/superglue/install/templates/js/store.js
+- lib/generators/superglue/install/templates/rollup/page_to_page_mapping.js
+- lib/generators/superglue/install/templates/rollup/page_to_page_mapping.ts
+- 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/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/components.ts
 - lib/generators/superglue/install/templates/ts/flash.ts
 - lib/generators/superglue/install/templates/ts/inputs.tsx
 - lib/generators/superglue/install/templates/ts/layout.tsx
 - lib/generators/superglue/install/templates/ts/page_to_page_mapping.ts
-- lib/generators/superglue/install/templates/ts/store.ts
 - lib/generators/superglue/install/templates/ts/tsconfig.json
+- lib/generators/superglue/install/templates/webpack/page_to_page_mapping.js
+- lib/generators/superglue/install/templates/webpack/page_to_page_mapping.ts
+- 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/scaffold/scaffold_generator.rb
 - lib/generators/superglue/scaffold_controller/scaffold_controller_generator.rb
 - lib/generators/superglue/view_collection/templates/js/edit.jsx

data/app/controllers/concerns/superglue/request_id_tracking.rb

@@ -1,16 +0,0 @@
-# This file was ported from the amazing folks at turbo-rails
-# You can find its MIT License here: https://github.com/hotwired/turbo-rails/blob/main/MIT-LICENSE
-
-module Superglue::RequestIdTracking
-  extend ActiveSupport::Concern
-
-  included do
-    around_action :superglue_tracking_request_id
-  end
-
-  private
-
-  def superglue_tracking_request_id(&block)
-    Superglue.with_request_id(request.headers["X-Superglue-Request-Id"], &block)
-  end
-end

data/app/models/superglue/debouncer.rb

@@ -1,28 +0,0 @@
-# This file was ported from the amazing folks at turbo-rails
-# You can find its MIT License here: https://github.com/hotwired/turbo-rails/blob/main/MIT-LICENSE
-
-class Superglue::Debouncer
-  attr_reader :delay, :scheduled_task
-
-  DEFAULT_DELAY = 0.5
-
-  def initialize(delay: DEFAULT_DELAY)
-    @delay = delay
-    @scheduled_task = nil
-  end
-
-  def debounce(&block)
-    scheduled_task&.cancel unless scheduled_task&.complete?
-    @scheduled_task = Concurrent::ScheduledTask.execute(delay, &block)
-  end
-
-  def wait
-    scheduled_task&.wait(wait_timeout)
-  end
-
-  private
-
-  def wait_timeout
-    delay + 1
-  end
-end

data/app/models/superglue/thread_debouncer.rb

@@ -1,30 +0,0 @@
-# This file was ported from the amazing folks at turbo-rails
-# You can find its MIT License here: https://github.com/hotwired/turbo-rails/blob/main/MIT-LICENSE
-
-class Superglue::ThreadDebouncer
-  delegate :wait, to: :debouncer
-
-  def self.for(key, delay: Superglue::Debouncer::DEFAULT_DELAY)
-    Thread.current[key] ||= new(key, Thread.current, delay: delay)
-  end
-
-  private_class_method :new
-
-  def initialize(key, thread, delay:)
-    @key = key
-    @debouncer = Superglue::Debouncer.new(delay: delay)
-    @thread = thread
-  end
-
-  def debounce
-    debouncer.debounce do
-      yield.tap do
-        thread[key] = nil
-      end
-    end
-  end
-
-  private
-
-  attr_reader :key, :debouncer, :thread
-end

data/lib/generators/superglue/install/templates/js/store.js

@@ -1,31 +0,0 @@
-import { configureStore } from "@reduxjs/toolkit"
-import { useDispatch, useSelector, useStore } from "react-redux"
-import { flashSlice } from "./slices/flash"
-import {
-  beforeVisit,
-  beforeFetch,
-  beforeRemote,
-  rootReducer
-} from "@thoughtbot/superglue"
-
-const { pages, superglue, fragments } = rootReducer
-
-export const store = configureStore({
-  devTools: process.env.NODE_ENV !== "production",
-  middleware: getDefaultMiddleware =>
-    getDefaultMiddleware({
-      serializableCheck: {
-        ignoredActions: [beforeFetch.type, beforeVisit.type, beforeRemote.type]
-      }
-    }),
-  reducer: {
-    superglue,
-    pages,
-    flash: flashSlice.reducer,
-    fragments,
-  }
-})
-
-export const useAppDispatch = useDispatch.withTypes()
-export const useAppSelector = useSelector.withTypes()
-export const useAppStore = useStore.withTypes()