-
Notifications
You must be signed in to change notification settings - Fork 974
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(og-gen): Adds package and vite plugin for dynamic og generation #10439
Merged
Merged
Changes from 9 commits
Commits
Show all changes
14 commits
Select commit
Hold shift + click to select a range
de00ba6
WIP
dac09 3a6e946
Get tests working for og plugin
dac09 c8851f6
Add ts tool belt
dac09 5bb040f
Add changeset
dac09 e5849f1
Merge branch 'main' into feat/og-gen-mw-vite-plugin
dac09 cad5e06
Undo exports changes to rwjs/internal
dac09 c7845e4
Merge branch 'feat/og-gen-mw-vite-plugin' of github.com:dac09/redwood…
dac09 2ba2f3d
Update tests for windows compatibility
dac09 d4df5b8
useMatch instead to toEqual for comparing paths for windows
dac09 f6b0b25
Rename package to ogimage-gen
dac09 9e5bc77
Rename tests, etc
dac09 fd99c88
Merge branch 'main' into feat/og-gen-mw-vite-plugin
dac09 b1d32fe
Convert to dual package
dac09 9a39cc1
Merge branch 'feat/og-gen-mw-vite-plugin' of github.com:dac09/redwood…
dac09 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
- feat(og-gen): Adds package and vite plugin for dynamic og generation (#10439) by @dac09 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
!src/__fixtures__/**/dist |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import { build } from '@redwoodjs/framework-tools' | ||
|
||
await build() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
{ | ||
"name": "@redwoodjs/og-gen", | ||
"version": "7.0.0", | ||
"type": "module", | ||
"repository": { | ||
"type": "git", | ||
"url": "https://github.com/redwoodjs/redwood.git", | ||
"directory": "packages/og-gen" | ||
}, | ||
"license": "MIT", | ||
"exports": { | ||
".": { | ||
"default": "./dist/index.js" | ||
}, | ||
"./plugin": { | ||
"default": "./dist/vite-plugin-og-gen.js" | ||
} | ||
}, | ||
"files": [ | ||
"dist" | ||
], | ||
"scripts": { | ||
"build": "tsx ./build.mts && yarn build:types", | ||
"build:pack": "yarn pack -o redwoodjs-og-gen.tgz", | ||
"build:types": "tsc --build --verbose", | ||
"prepublishOnly": "NODE_ENV=production yarn build", | ||
"test": "vitest run", | ||
"test:watch": "vitest watch" | ||
}, | ||
"dependencies": { | ||
"@redwoodjs/internal": "workspace:*", | ||
"@redwoodjs/project-config": "workspace:*", | ||
"@redwoodjs/router": "workspace:*", | ||
"@redwoodjs/vite": "workspace:*", | ||
"fast-glob": "3.3.2", | ||
"react": "18.3.0-canary-a870b2d54-20240314", | ||
"react-dom": "18.3.0-canary-a870b2d54-20240314" | ||
}, | ||
"devDependencies": { | ||
"@redwoodjs/framework-tools": "workspace:*", | ||
"ts-toolbelt": "9.6.0", | ||
"tsx": "4.7.1", | ||
"typescript": "5.4.3", | ||
"vite": "5.2.8", | ||
"vitest": "1.4.0" | ||
}, | ||
"gitHead": "3905ed045508b861b495f8d5630d76c7a157d8f1" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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-og-gen' | ||
|
||
// Memfs mocks the redwood project-config stuff | ||
vi.mock('fs', () => ({ ...memfs, default: { ...memfs } })) | ||
vi.mock('node:fs', () => ({ ...memfs, default: { ...memfs } })) | ||
|
||
/** | ||
* + "ogGen/pages\\About\\AboutPage.jpg": "/redwood-app/web/src/pages/About/AboutPage.jpg.jsx", | ||
+ "ogGen/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([ | ||
'ogGen/pages/Posts/PostsPage/PostsPage.png', | ||
'ogGen/pages/About/AboutPage.jpg', | ||
'ogGen/pages/Contact/ContactPage.png', | ||
]), | ||
) | ||
|
||
// For windows, we do the conversion before the test | ||
expect( | ||
ensurePosixPath( | ||
rollupInputs['ogGen/pages/Posts/PostsPage/PostsPage.png'], | ||
), | ||
).toMatch('/redwood-app/web/src/pages/Posts/PostsPage/PostsPage.png.tsx') | ||
|
||
expect( | ||
ensurePosixPath(rollupInputs['ogGen/pages/About/AboutPage.jpg']), | ||
).toMatch('/redwood-app/web/src/pages/About/AboutPage.jpg.jsx') | ||
|
||
expect( | ||
ensurePosixPath(rollupInputs['ogGen/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-og-gen', | ||
apply: 'build', // Important! | ||
config: expect.any(Function), | ||
} | ||
|
||
const plugin = await vitePluginOgGen() | ||
|
||
expect(plugin).toEqual(expectedPlugin) | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 vitePluginOgGen(): 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[`ogGen/${ensurePosixPath(pathKey)}`] = ogComponentPath | ||
}) | ||
|
||
return { | ||
name: 'rw-vite-plugin-og-gen', | ||
apply: 'build', // We only need to update rollup inputs for build | ||
config: () => { | ||
return { | ||
build: { | ||
rollupOptions: { | ||
input: ogComponentInput, | ||
}, | ||
}, | ||
} | ||
}, | ||
} | ||
} | ||
|
||
export default vitePluginOgGen |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
{ | ||
"extends": "../../tsconfig.compilerOption.json", | ||
"compilerOptions": { | ||
"rootDir": "src", | ||
"outDir": "dist", | ||
"moduleResolution": "Node16", // uses the exports field in @redwoodjs/vite, @redwoodjs/internal | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. See this! |
||
"module": "Node16" | ||
}, | ||
"include": [ | ||
"src" | ||
], | ||
"references": [ | ||
{ | ||
"path": "../project-config" | ||
}, | ||
{ | ||
"path": "../vite" | ||
}, | ||
{ | ||
"path": "../router" | ||
}, | ||
{ | ||
"path": "../internal" | ||
} | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Note: ESM ONLY! ✌️