vite-plugin-singlefile
Advanced tools
Comparing version
@@ -1,2 +0,2 @@ | ||
import { PluginOption } from "vite"; | ||
import { UserConfig, PluginOption } from "vite"; | ||
export type Config = { | ||
@@ -7,5 +7,6 @@ useRecommendedBuildConfig?: boolean; | ||
deleteInlinedFiles?: boolean; | ||
overrideConfig?: Partial<UserConfig>; | ||
}; | ||
export declare function replaceScript(html: string, scriptFilename: string, scriptCode: string, removeViteModuleLoader?: boolean): string; | ||
export declare function replaceCss(html: string, scriptFilename: string, scriptCode: string): string; | ||
export declare function viteSingleFile({ useRecommendedBuildConfig, removeViteModuleLoader, inlinePattern, deleteInlinedFiles, }?: Config): PluginOption; | ||
export declare function viteSingleFile({ useRecommendedBuildConfig, removeViteModuleLoader, inlinePattern, deleteInlinedFiles, overrideConfig, }?: Config): PluginOption; |
@@ -15,3 +15,3 @@ "use strict"; | ||
const preloadMarker = /"?__VITE_PRELOAD__"?/g; | ||
const newCode = scriptCode.replace(preloadMarker, "void 0").replace(/<(\/script>|!--)/g, '\\x3C$1'); | ||
const newCode = scriptCode.replace(preloadMarker, "void 0").replace(/<(\/script>|!--)/g, "\\x3C$1"); | ||
const inlined = html.replace(reScript, (_, beforeSrc, afterSrc) => `<script${beforeSrc}${afterSrc}>${newCode.trim()}</script>`); | ||
@@ -30,3 +30,36 @@ return removeViteModuleLoader ? _removeViteModuleLoader(inlined) : inlined; | ||
const isHtmlFile = /\.html?$/; | ||
function viteSingleFile({ useRecommendedBuildConfig = true, removeViteModuleLoader = false, inlinePattern = [], deleteInlinedFiles = true, } = defaultConfig) { | ||
function viteSingleFile({ useRecommendedBuildConfig = true, removeViteModuleLoader = false, inlinePattern = [], deleteInlinedFiles = true, overrideConfig = {}, } = defaultConfig) { | ||
// Modifies the Vite build config to make this plugin work well. | ||
const _useRecommendedBuildConfig = (config) => { | ||
if (!config.build) | ||
config.build = {}; | ||
// Ensures that even very large assets are inlined in your JavaScript. | ||
config.build.assetsInlineLimit = () => true; | ||
// Avoid warnings about large chunks. | ||
config.build.chunkSizeWarningLimit = 100000000; | ||
// Emit all CSS as a single file, which `vite-plugin-singlefile` can then inline. | ||
config.build.cssCodeSplit = false; | ||
// We need relative path to support any static files in public folder, | ||
// which are copied to ${build.outDir} by vite. | ||
config.base = "./"; | ||
// Make generated files in ${build.outDir}'s root, instead of default ${build.outDir}/assets. | ||
// Then the embedded resources can be loaded by relative path. | ||
config.build.assetsDir = ""; | ||
if (!config.build.rollupOptions) | ||
config.build.rollupOptions = {}; | ||
if (!config.build.rollupOptions.output) | ||
config.build.rollupOptions.output = {}; | ||
const updateOutputOptions = (out) => { | ||
// Ensure that as many resources as possible are inlined. | ||
out.inlineDynamicImports = true; | ||
}; | ||
if (Array.isArray(config.build.rollupOptions.output)) { | ||
for (const o of config.build.rollupOptions.output) | ||
updateOutputOptions(o); | ||
} | ||
else { | ||
updateOutputOptions(config.build.rollupOptions.output); | ||
} | ||
Object.assign(config, overrideConfig); | ||
}; | ||
return { | ||
@@ -43,3 +76,3 @@ name: "vite:singlefile", | ||
js: [], | ||
other: [] | ||
other: [], | ||
}; | ||
@@ -107,33 +140,1 @@ for (const i of Object.keys(bundle)) { | ||
const _removeViteModuleLoader = (html) => html.replace(/(<script type="module" crossorigin>\s*)\(function(?: polyfill)?\(\)\s*\{[\s\S]*?\}\)\(\);/, '<script type="module">'); | ||
// Modifies the Vite build config to make this plugin work well. | ||
const _useRecommendedBuildConfig = (config) => { | ||
if (!config.build) | ||
config.build = {}; | ||
// Ensures that even very large assets are inlined in your JavaScript. | ||
config.build.assetsInlineLimit = () => true; | ||
// Avoid warnings about large chunks. | ||
config.build.chunkSizeWarningLimit = 100000000; | ||
// Emit all CSS as a single file, which `vite-plugin-singlefile` can then inline. | ||
config.build.cssCodeSplit = false; | ||
// We need relative path to support any static files in public folder, | ||
// which are copied to ${build.outDir} by vite. | ||
config.base = './'; | ||
// Make generated files in ${build.outDir}'s root, instead of default ${build.outDir}/assets. | ||
// Then the embedded resources can be loaded by relative path. | ||
config.build.assetsDir = ''; | ||
if (!config.build.rollupOptions) | ||
config.build.rollupOptions = {}; | ||
if (!config.build.rollupOptions.output) | ||
config.build.rollupOptions.output = {}; | ||
const updateOutputOptions = (out) => { | ||
// Ensure that as many resources as possible are inlined. | ||
out.inlineDynamicImports = true; | ||
}; | ||
if (Array.isArray(config.build.rollupOptions.output)) { | ||
for (const o of config.build.rollupOptions.output) | ||
updateOutputOptions(o); | ||
} | ||
else { | ||
updateOutputOptions(config.build.rollupOptions.output); | ||
} | ||
}; |
@@ -1,2 +0,2 @@ | ||
import { PluginOption } from "vite"; | ||
import { UserConfig, PluginOption } from "vite"; | ||
export type Config = { | ||
@@ -7,5 +7,6 @@ useRecommendedBuildConfig?: boolean; | ||
deleteInlinedFiles?: boolean; | ||
overrideConfig?: Partial<UserConfig>; | ||
}; | ||
export declare function replaceScript(html: string, scriptFilename: string, scriptCode: string, removeViteModuleLoader?: boolean): string; | ||
export declare function replaceCss(html: string, scriptFilename: string, scriptCode: string): string; | ||
export declare function viteSingleFile({ useRecommendedBuildConfig, removeViteModuleLoader, inlinePattern, deleteInlinedFiles, }?: Config): PluginOption; | ||
export declare function viteSingleFile({ useRecommendedBuildConfig, removeViteModuleLoader, inlinePattern, deleteInlinedFiles, overrideConfig, }?: Config): PluginOption; |
@@ -7,3 +7,3 @@ import micromatch from "micromatch"; | ||
const preloadMarker = /"?__VITE_PRELOAD__"?/g; | ||
const newCode = scriptCode.replace(preloadMarker, "void 0").replace(/<(\/script>|!--)/g, '\\x3C$1'); | ||
const newCode = scriptCode.replace(preloadMarker, "void 0").replace(/<(\/script>|!--)/g, "\\x3C$1"); | ||
const inlined = html.replace(reScript, (_, beforeSrc, afterSrc) => `<script${beforeSrc}${afterSrc}>${newCode.trim()}</script>`); | ||
@@ -22,3 +22,36 @@ return removeViteModuleLoader ? _removeViteModuleLoader(inlined) : inlined; | ||
const isHtmlFile = /\.html?$/; | ||
export function viteSingleFile({ useRecommendedBuildConfig = true, removeViteModuleLoader = false, inlinePattern = [], deleteInlinedFiles = true, } = defaultConfig) { | ||
export function viteSingleFile({ useRecommendedBuildConfig = true, removeViteModuleLoader = false, inlinePattern = [], deleteInlinedFiles = true, overrideConfig = {}, } = defaultConfig) { | ||
// Modifies the Vite build config to make this plugin work well. | ||
const _useRecommendedBuildConfig = (config) => { | ||
if (!config.build) | ||
config.build = {}; | ||
// Ensures that even very large assets are inlined in your JavaScript. | ||
config.build.assetsInlineLimit = () => true; | ||
// Avoid warnings about large chunks. | ||
config.build.chunkSizeWarningLimit = 100000000; | ||
// Emit all CSS as a single file, which `vite-plugin-singlefile` can then inline. | ||
config.build.cssCodeSplit = false; | ||
// We need relative path to support any static files in public folder, | ||
// which are copied to ${build.outDir} by vite. | ||
config.base = "./"; | ||
// Make generated files in ${build.outDir}'s root, instead of default ${build.outDir}/assets. | ||
// Then the embedded resources can be loaded by relative path. | ||
config.build.assetsDir = ""; | ||
if (!config.build.rollupOptions) | ||
config.build.rollupOptions = {}; | ||
if (!config.build.rollupOptions.output) | ||
config.build.rollupOptions.output = {}; | ||
const updateOutputOptions = (out) => { | ||
// Ensure that as many resources as possible are inlined. | ||
out.inlineDynamicImports = true; | ||
}; | ||
if (Array.isArray(config.build.rollupOptions.output)) { | ||
for (const o of config.build.rollupOptions.output) | ||
updateOutputOptions(o); | ||
} | ||
else { | ||
updateOutputOptions(config.build.rollupOptions.output); | ||
} | ||
Object.assign(config, overrideConfig); | ||
}; | ||
return { | ||
@@ -35,3 +68,3 @@ name: "vite:singlefile", | ||
js: [], | ||
other: [] | ||
other: [], | ||
}; | ||
@@ -99,33 +132,1 @@ for (const i of Object.keys(bundle)) { | ||
const _removeViteModuleLoader = (html) => html.replace(/(<script type="module" crossorigin>\s*)\(function(?: polyfill)?\(\)\s*\{[\s\S]*?\}\)\(\);/, '<script type="module">'); | ||
// Modifies the Vite build config to make this plugin work well. | ||
const _useRecommendedBuildConfig = (config) => { | ||
if (!config.build) | ||
config.build = {}; | ||
// Ensures that even very large assets are inlined in your JavaScript. | ||
config.build.assetsInlineLimit = () => true; | ||
// Avoid warnings about large chunks. | ||
config.build.chunkSizeWarningLimit = 100000000; | ||
// Emit all CSS as a single file, which `vite-plugin-singlefile` can then inline. | ||
config.build.cssCodeSplit = false; | ||
// We need relative path to support any static files in public folder, | ||
// which are copied to ${build.outDir} by vite. | ||
config.base = './'; | ||
// Make generated files in ${build.outDir}'s root, instead of default ${build.outDir}/assets. | ||
// Then the embedded resources can be loaded by relative path. | ||
config.build.assetsDir = ''; | ||
if (!config.build.rollupOptions) | ||
config.build.rollupOptions = {}; | ||
if (!config.build.rollupOptions.output) | ||
config.build.rollupOptions.output = {}; | ||
const updateOutputOptions = (out) => { | ||
// Ensure that as many resources as possible are inlined. | ||
out.inlineDynamicImports = true; | ||
}; | ||
if (Array.isArray(config.build.rollupOptions.output)) { | ||
for (const o of config.build.rollupOptions.output) | ||
updateOutputOptions(o); | ||
} | ||
else { | ||
updateOutputOptions(config.build.rollupOptions.output); | ||
} | ||
}; |
{ | ||
"name": "vite-plugin-singlefile", | ||
"version": "2.2.1", | ||
"version": "2.3.0", | ||
"description": "Vite plugin for inlining all JavaScript and CSS resources", | ||
@@ -5,0 +5,0 @@ "main": "dist/cjs/index.js", |
@@ -103,2 +103,6 @@ # vite-plugin-singlefile | ||
### overrideConfig | ||
The recommended configuration really is recommended, but if you need to tweak something it is doing, you can put your own partial rollup configuration in this object to override this plugin's defaults. For example, the default base URL for public non-inlined files is "./", but if you need it to be absolute, you can use `overrideConfig: { base: "/" }` to set it. | ||
### Caveats | ||
@@ -105,0 +109,0 @@ |
23746
4.03%286
1.42%126
3.28%