[HINT] Download the complete skill directory including SKILL.md and all related files
| name | vendor-dep |
| description | Extract a npm dependency into the shared vendor bundle |
| argument-hint | <package-name> <global-camel-name> <plugin-name> [plugin-name2 ...] |
Extract a plugin's npm dependency into the shared vendor/ bundle so it can be reused across plugins.
package-name: the npm package name (e.g. html-to-image)global-camel-name: camelCase name for globalThis and IIFE export (e.g. htmlToImage)plugin-name: one or more plugin folder names that use this dependency (e.g. tinker-code-image tinker-photo-collage)The vendor entry file name and build mode/script name are derived from global-camel-name lowercased (e.g. htmltoimage).
lowerName = global-camel-name lowercased (e.g. htmlToImage → htmltoimage)pluginVendorName = PluginVendor + PascalCase of global-camel-name (e.g. PluginVendorHtmlToImage)First check how the plugin imports the package:
import { foo } from '...' or import * as foo from '...'): use import *import Foo from '...'): use default importCreate vendor/<lowerName>.ts:
Named exports:
import * as <global-camel-name> from '<package-name>'
const g = globalThis as Record<string, unknown>
g.<global-camel-name> = <global-camel-name>
export { <global-camel-name> }
Default export:
import <global-camel-name> from '<package-name>'
const g = globalThis as Record<string, unknown>
g.<global-camel-name> = <global-camel-name>
export default <global-camel-name>
vendor/vite.config.tsAdd to globals map:
'<package-name>': '<global-camel-name>',
Add build target (before the final return createConfig('react', ...)):
if (target === '<lowerName>') {
return createConfig('<lowerName>', '<pluginVendorName>')
}
vendor/package.jsonAdd to devDependencies:
"<package-name>": "<version>"
Use the same version string currently in the plugin's package.json.
Add build script:
"build:<lowerName>": "vite build --config vite.config.ts --mode <lowerName>"
Append to build script chain:
&& npm run build:<lowerName>
package.jsonFor each <plugin-name>, remove <package-name> from devDependencies. If devDependencies becomes empty, keep the key with an empty object {}.
index.htmlFor each <plugin-name>, add the following <script> tag in <head> after existing vendor scripts:
<script src="/vendor/<lowerName>.js"></script>