superglue 2.0.0.alpha.11 → 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/tsconfig.json

@@ -23,6 +23,5 @@
   "include": [
     "app/javascript/**/*",
     "app/views/**/*"
-  ],
-  "reflection": true
+  ]
 }

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,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_plural_table_name %>Path: string
@@ -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.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.11
+  version: 2.0.0.beta.2
 platform: ruby
 authors:
 - Johny Ho
@@ -67,19 +67,20 @@ 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/esbuild/plugin.js
 - lib/generators/superglue/install/templates/initializer.rb
 - lib/generators/superglue/install/templates/js/application.jsx
 - lib/generators/superglue/install/templates/js/application_visit.js
@@ -90,18 +91,27 @@ files:
 - 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/esbuild/plugin.js

@@ -1,43 +0,0 @@
-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'
-        };
-      });
-    },
-  };
-}

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()

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

@@ -1,35 +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 type AppDispatch = typeof store.dispatch;
-export type RootState = ReturnType<typeof store.getState>;
-export type AppStore = typeof store;
-
-export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
-export const useAppSelector = useSelector.withTypes<RootState>();
-export const useAppStore = useStore.withTypes<AppStore>();