superglue 2.0.0.beta.2 → 2.0.0.rc.1

data/lib/generators/superglue/install/templates/js/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:  process.env.NODE_ENV === 'production' ? [] : [] ,
+  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/js/page_to_page_mapping.js

@@ -1,35 +1,12 @@
-// import your page component
-// e.g import PostsEdit from '../views/posts/edit'
+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/**/*.jsx', {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 = {
-};
+const pageIdentifierToPageComponent = {}
 
-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/rollup/page_to_page_mapping.js

@@ -1,5 +1,5 @@
 const pageIdentifierToPageComponent = {}
-const pages = import.meta.glob('../views/**/*.jsx', { eager: true })
+const pages = import.meta.glob('../views/**/*.{tsx,jsx}', { eager: true })
 
 for (const key in pages) {
   const identifier = key.replace('../views/', '').split('.')[0]

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

@@ -1,5 +1,5 @@
 const pageIdentifierToPageComponent: Record<string, React.ComponentType> = {}
-const pages = import.meta.glob('../views/**/*.tsx', { eager: true })
+const pages = import.meta.glob('../views/**/*.{tsx,jsx}', { eager: true })
 
 for (const key in pages) {
   const identifier = key.replace('../views/', '').split('.')[0]

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

@@ -15,7 +15,6 @@ export default {
     sourcemap: true
   },
   plugins: [
-    importMetaGlob(),
     alias({
       entries: [
         { find: "@javascript", replacement: path.resolve("app/javascript") },
@@ -32,6 +31,7 @@ export default {
       ],
       extensions: [".ts", ".tsx", ".js", ".jsx"]
     }),
+    importMetaGlob(),
     ...(process.env.NODE_ENV === 'production' ? [] : [deepkitPlugin()])
   ]
 }

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

@@ -14,7 +14,6 @@ export default {
     sourcemap: true
   },
   plugins: [
-    importMetaGlob(),
     alias({
       entries: [
         { find: "@javascript", replacement: path.resolve("app/javascript") },
@@ -27,6 +26,7 @@ export default {
       babelHelpers: "bundled",
       presets: [["@babel/preset-react", { runtime: "automatic" }]],
       extensions: [".js", ".jsx"]
-    })
+    }),
+    importMetaGlob(),
   ]
 }

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

@@ -14,7 +14,6 @@ export default {
     sourcemap: true
   },
   plugins: [
-    importMetaGlob(),
     alias({
       entries: [
         { find: "@javascript", replacement: path.resolve("app/javascript") },
@@ -30,6 +29,7 @@ export default {
         "@babel/preset-typescript"
       ],
       extensions: [".ts", ".tsx", ".js", ".jsx"]
-    })
+    }),
+    importMetaGlob(),
   ]
 }

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

@@ -0,0 +1,38 @@
+import path from "path"
+import resolve from "@rollup/plugin-node-resolve"
+import commonjs from "@rollup/plugin-commonjs"
+import babel from "@rollup/plugin-babel"
+import alias from "@rollup/plugin-alias"
+import importMetaGlob from "rollup-plugin-import-meta-glob"
+import ttsc from "@ttsc/unplugin"
+const ttscPlugin = ttsc.rollup
+
+export default {
+  input: "app/javascript/application.tsx",
+  output: {
+    file: "app/assets/builds/application.js",
+    format: "esm",
+    inlineDynamicImports: true,
+    sourcemap: true
+  },
+  plugins: [
+    alias({
+      entries: [
+        { find: "@javascript", replacement: path.resolve("app/javascript") },
+        { find: "@views", replacement: path.resolve("app/views") }
+      ]
+    }),
+    resolve({ extensions: [".ts", ".tsx", ".js", ".jsx"] }),
+    commonjs(),
+    babel({
+      babelHelpers: "bundled",
+      presets: [
+        ["@babel/preset-react", { runtime: "automatic" }],
+        "@babel/preset-typescript"
+      ],
+      extensions: [".ts", ".tsx", ".js", ".jsx"]
+    }),
+    importMetaGlob(),
+    ...(process.env.NODE_ENV === 'production' ? [] : [ttscPlugin()])
+  ]
+}

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

@@ -0,0 +1,37 @@
+import { globImportPlugin } from 'bun-plugin-glob-import'
+import { watch } from 'fs'
+
+const isWatch = process.argv.includes('--watch')
+
+const buildOptions = {
+  entrypoints: ['app/javascript/server_rendering.jsx'],
+  outdir: 'app/assets/builds',
+  sourcemap: 'external',
+  target: 'browser',
+  naming: 'server_rendering.js',
+  define: {
+    'process.env.NODE_ENV': JSON.stringify('production'),
+  },
+  plugins: [globImportPlugin()],
+}
+
+if (isWatch) {
+  await Bun.build(buildOptions)
+  console.log('Watching SSR for changes...')
+
+  watch('app/views', { recursive: true }, async (event, filename) => {
+    if (event === 'rename' && /\.[jt]sx$/.test(filename)) {
+      await Bun.build(buildOptions)
+    }
+  })
+} else {
+  const result = await Bun.build(buildOptions)
+
+  if (!result.success) {
+    console.error('SSR build failed')
+    for (const log of result.logs) {
+      console.error(log)
+    }
+    process.exit(1)
+  }
+}

data/lib/generators/superglue/install/templates/ssr/esbuild.build_ssr.mjs

@@ -0,0 +1,37 @@
+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')
+
+const buildOptions = {
+  entryPoints: ['app/javascript/server_rendering.jsx'],
+  bundle: true,
+  sourcemap: true,
+  outfile: 'app/assets/builds/server_rendering.js',
+  platform: 'browser',
+  logLevel: 'info',
+  loader: {
+    '.svg': 'dataurl',
+  },
+  plugins: [
+    importGlobPlugin(),
+  ],
+}
+
+if (isWatch) {
+  let ctx = await esbuild.context(buildOptions)
+  await ctx.watch()
+  console.log('Watching SSR 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 {
+  await esbuild.build(buildOptions)
+}

data/lib/generators/superglue/install/templates/ssr/rollup.build_ssr.config.js

@@ -0,0 +1,42 @@
+import path from "path"
+import resolve from "@rollup/plugin-node-resolve"
+import commonjs from "@rollup/plugin-commonjs"
+import babel from "@rollup/plugin-babel"
+import alias from "@rollup/plugin-alias"
+import replace from "@rollup/plugin-replace"
+import importMetaGlob from "rollup-plugin-import-meta-glob"
+
+export default {
+  input: "app/javascript/server_rendering.jsx",
+  output: {
+    file: "app/assets/builds/server_rendering.js",
+    format: "iife",
+    name: "SSR",
+    inlineDynamicImports: true,
+    sourcemap: true,
+  },
+  plugins: [
+    replace({
+      preventAssignment: true,
+      'process.env.NODE_ENV': JSON.stringify('production')
+    }),
+    alias({
+      entries: [
+        { find: "@javascript", replacement: path.resolve("app/javascript") },
+        { find: "@views", replacement: path.resolve("app/views") }
+      ]
+    }),
+    resolve({
+      extensions: [".js", ".jsx", ".ts", ".tsx"],
+      browser: true,
+      exportConditions: ["browser"]
+    }),
+    commonjs(),
+    babel({
+      babelHelpers: "bundled",
+      presets: [["@babel/preset-react", { runtime: "automatic" }]],
+      extensions: [".js", ".jsx", ".ts", ".tsx"]
+    }),
+    importMetaGlob(),
+  ]
+}

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

@@ -0,0 +1,22 @@
+import React from "react";
+import { createApp } from "@thoughtbot/superglue";
+import { buildVisitAndRemote } from "./application_visit";
+import { pageIdentifierToPageComponent } from "./page_to_page_mapping";
+import { renderToString } from "react-dom/server";
+
+setHumidRenderer((json, baseUrl, path) => {
+  const initialState = JSON.parse(json);
+  const { Provider, Outlet } = createApp({
+    baseUrl,
+    initialPage: initialState,
+    path,
+    buildVisitAndRemote,
+    mapping: pageIdentifierToPageComponent,
+  });
+
+  return renderToString(
+    <Provider>
+      <Outlet />
+    </Provider>,
+  );
+});

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { createApp } from "@thoughtbot/superglue";
+import { buildVisitAndRemote } from "./application_visit";
+import { pageIdentifierToPageComponent } from "./page_to_page_mapping";
+import { renderToString } from "react-dom/server";
+
+declare function setHumidRenderer(
+  fn: (json: string, baseUrl: string, path: string) => string,
+): void;
+
+setHumidRenderer((json, baseUrl, path) => {
+  const initialState = JSON.parse(json);
+  const { Provider, Outlet } = createApp({
+    baseUrl,
+    initialPage: initialState,
+    path,
+    buildVisitAndRemote,
+    mapping: pageIdentifierToPageComponent,
+  });
+
+  return renderToString(
+    <Provider>
+      <Outlet />
+    </Provider>,
+  );
+});