Convert to dual package

packages/ogimage-gen/cjsWrappers/plugin.js

@@ -0,0 +1,3 @@
+/* eslint-env node */
+
+module.exports = require('../dist/vite-plugin-ogimage-gen.js').default

packages/ogimage-gen/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@redwoodjs/ogimage-gen",
   "version": "7.0.0",
-  "type": "module",
   "repository": {
     "type": "git",
     "url": "https://github.com/redwoodjs/redwood.git",
@@ -13,11 +12,14 @@
       "default": "./dist/index.js"
     },
     "./plugin": {
-      "default": "./dist/vite-plugin-ogimage-gen.js"
+      "import": "./dist/vite-plugin-ogimage-gen.js",
+      "default": "./cjsWrappers/plugin.js"
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "cjsWrappers"
+
   ],
   "scripts": {
     "build": "tsx ./build.mts && yarn build:types",

packages/ogimage-gen/src/vite-plugin-ogimage-gen.test.ts

@@ -0,0 +1,86 @@
+import { vol, fs as memfs } from 'memfs'
+import { describe, expect, test, vi, beforeAll, afterAll } from 'vitest'
+
+import { ensurePosixPath } from '@redwoodjs/project-config'
+
+import vitePluginOgGen from './vite-plugin-ogimage-gen'
+
+// Memfs mocks the redwood project-config stuff
+vi.mock('fs', () => ({ ...memfs, default: { ...memfs } }))
+vi.mock('node:fs', () => ({ ...memfs, default: { ...memfs } }))
+
+/**
+ *   +   "ogImage/pages\\About\\AboutPage.jpg": "/redwood-app/web/src/pages/About/AboutPage.jpg.jsx",
+  +   "ogImage/pages\\Contact\\ContactPage.png": "/redwood-app/web/src/pages/Contact/ContactPage.png.jsx",
+  +   "ogGen\\pages\\Posts\\PostsPage\\PostsPage.png": "/redwood-app/web/src/pages/Posts/PostsPage/PostsPage.png.tsx",
+ */
+
+describe('vitePluginOgGen', () => {
+  let original_RWJS_CWD
+
+  beforeAll(() => {
+    original_RWJS_CWD = process.env.RWJS_CWD
+    process.env.RWJS_CWD = '/redwood-app'
+    // Mock the file system using memfs
+    vol.fromJSON(
+      {
+        'redwood.toml': '',
+        'web/src/pages/Posts/PostsPage/PostsPage.png.tsx': 'PostsOG',
+        'web/src/pages/About/AboutPage.jpg.jsx': 'AboutOG',
+        'web/src/pages/Contact/ContactPage.png.jsx': 'ContactOG',
+      },
+      '/redwood-app',
+    )
+  })
+
+  afterAll(() => {
+    process.env.RWJS_CWD = original_RWJS_CWD
+  })
+
+  test('should generate rollup inputs for all OG components', async () => {
+    // Type cast so TS doesn't complain calling config below
+    // because config can be of many types!
+    const plugin = (await vitePluginOgGen()) as {
+      config: (...args: any) => any
+    }
+
+    const rollupInputs = plugin.config().build?.rollupOptions?.input
+
+    const inputKeys = Object.keys(rollupInputs)
+
+    expect(inputKeys).toEqual(
+      expect.arrayContaining([
+        'ogImage/pages/Posts/PostsPage/PostsPage.png',
+        'ogImage/pages/About/AboutPage.jpg',
+        'ogImage/pages/Contact/ContactPage.png',
+      ]),
+    )
+
+    // For windows, we do the conversion before the test
+    expect(
+      ensurePosixPath(
+        rollupInputs['ogImage/pages/Posts/PostsPage/PostsPage.png'],
+      ),
+    ).toMatch('/redwood-app/web/src/pages/Posts/PostsPage/PostsPage.png.tsx')
+
+    expect(
+      ensurePosixPath(rollupInputs['ogImage/pages/About/AboutPage.jpg']),
+    ).toMatch('/redwood-app/web/src/pages/About/AboutPage.jpg.jsx')
+
+    expect(
+      ensurePosixPath(rollupInputs['ogImage/pages/Contact/ContactPage.png']),
+    ).toMatch('/redwood-app/web/src/pages/Contact/ContactPage.png.jsx')
+  })
+
+  test('returns the correct Vite plugin object', async () => {
+    const expectedPlugin = {
+      name: 'rw-vite-plugin-ogimage-gen',
+      apply: 'build', // Important!
+      config: expect.any(Function),
+    }
+
+    const plugin = await vitePluginOgGen()
+
+    expect(plugin).toEqual(expectedPlugin)
+  })
+})

packages/ogimage-gen/src/vite-plugin-ogimage-gen.ts

@@ -0,0 +1,56 @@
+import fs from 'fs'
+import path from 'node:path'
+
+import fg from 'fast-glob'
+import type { O } from 'ts-toolbelt'
+import type { Plugin as VitePlugin } from 'vite'
+
+import { ensurePosixPath, getPaths } from '@redwoodjs/project-config'
+
+type ConfigPlugin = O.Required<VitePlugin, 'config'>
+
+/**
+ * This plugin updates the rollup inputs to include all OG components.
+ *
+ * Internally, Redwood's vite settings will merge this with the default vite config, and any user config
+ */
+function vitePluginOgImageGen(): ConfigPlugin {
+  const rwPaths = getPaths()
+
+  const allOgComponents = fg.sync('pages/**/*.{png,jpg}.{jsx,tsx}', {
+    cwd: rwPaths.web.src,
+    absolute: true,
+    // @MARK This allows us to mock the fs module in tests
+    fs,
+  })
+
+  // Generates the rollup inputs for all OG components, in their subpaths
+  // The actual filename doesn't have to match the Page name, just has to be next to the Page
+  // e.g. { 'ogGen/pages/Posts/PostsPage': '/../pages/Posts/PostsPage/PostsPage.og.png.tsx'}
+
+  const ogComponentInput: Record<string, string> = {}
+  allOgComponents.forEach((ogComponentPath) => {
+    const pathKey = path
+      .relative(rwPaths.web.src, ogComponentPath)
+      .replace(/\.[jt]sx?$/, '')
+
+    // The rollup input takes '/' to create folders.
+    ogComponentInput[`ogImage/${ensurePosixPath(pathKey)}`] = ogComponentPath
+  })
+
+  return {
+    name: 'rw-vite-plugin-ogimage-gen',
+    apply: 'build', // We only need to update rollup inputs for build
+    config: () => {
+      return {
+        build: {
+          rollupOptions: {
+            input: ogComponentInput,
+          },
+        },
+      }
+    },
+  }
+}
+
+export default vitePluginOgImageGen

packages/ogimage-gen/tsconfig.json

@@ -3,8 +3,6 @@
   "compilerOptions": {
     "rootDir": "src",
     "outDir": "dist",
-    "moduleResolution": "Node16", // uses the exports field in @redwoodjs/vite, @redwoodjs/internal
-    "module": "Node16"
   },
   "include": [
     "src"