Skip to content

Commit

Permalink
feat: support Vite config.define properties in dev mode (#97)
Browse files Browse the repository at this point in the history
  • Loading branch information
samrum authored Apr 28, 2023
1 parent 8d8f3fc commit c0edbab
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 19 deletions.
27 changes: 23 additions & 4 deletions src/devBuilder/devBuilder.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export default abstract class DevBuilder<
protected hmrServerOrigin = "";
protected inlineScriptHashes = new Set<string>();
protected outDir: string;
protected hmrViteEnvFileUrl = "";

constructor(
protected viteConfig: ResolvedConfig,
Expand Down Expand Up @@ -53,6 +54,7 @@ export default abstract class DevBuilder<
manifestHtmlFiles: string[];
}) {
this.hmrServerOrigin = this.getHmrServerOrigin(devServerPort);
this.hmrViteEnvFileUrl = this.getHmrViteEnvFileUrl();

await emptyDir(this.outDir);
const publicDir = path.resolve(
Expand Down Expand Up @@ -173,10 +175,10 @@ export default abstract class DevBuilder<
protected async writeManifestScriptFile(fileName: string): Promise<string> {
const outputFileName = getOutputFileName(fileName);

const scriptLoaderFile = getScriptLoaderFile(
outputFileName,
`${this.hmrServerOrigin}/${fileName}`
);
const scriptLoaderFile = getScriptLoaderFile(outputFileName, [
this.hmrViteEnvFileUrl,
`${this.hmrServerOrigin}/${fileName}`,
]);

const outFile = `${this.outDir}/${scriptLoaderFile.fileName}`;

Expand Down Expand Up @@ -302,4 +304,21 @@ export default abstract class DevBuilder<

return `http://${this.viteConfig.server.hmr!.host}:${devServerPort}`;
}

private getHmrViteEnvFileUrl(): string {
const envFileName = this.viteConfig.resolve?.alias
?.reverse()
.find((pattern) =>
pattern.replacement.endsWith("vite/dist/client/env.mjs")
)?.replacement;

if (!envFileName) {
return "";
}

let envPath = normalizePath(envFileName);
envPath = envPath.slice(envPath.indexOf("node_modules"));

return `${this.hmrServerOrigin}/${envPath}`;
}
}
7 changes: 4 additions & 3 deletions src/devBuilder/devBuilderManifestV3.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,10 @@ export default class DevBuilderManifestV3 extends DevBuilder<chrome.runtime.Mani

const fileName = manifest.background?.service_worker;

const serviceWorkerLoader = getServiceWorkerLoaderFile(
`${this.hmrServerOrigin}/${fileName}`
);
const serviceWorkerLoader = getServiceWorkerLoaderFile([
this.hmrViteEnvFileUrl,
`${this.hmrServerOrigin}/${fileName}`,
]);

manifest.background.service_worker = serviceWorkerLoader.fileName;

Expand Down
4 changes: 3 additions & 1 deletion src/manifestParser/manifestV3.ts
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,9 @@ export default class ManifestV3 extends ManifestParser<Manifest> {
throw new Error(`Failed to find chunk info for ${serviceWorkerFileName}`);
}

const serviceWorkerLoader = getServiceWorkerLoaderFile(chunkInfo.fileName);
const serviceWorkerLoader = getServiceWorkerLoaderFile([
chunkInfo.fileName,
]);

result.manifest.background!.service_worker = serviceWorkerLoader.fileName;

Expand Down
32 changes: 21 additions & 11 deletions src/utils/loader.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,31 +16,41 @@ export function getScriptHtmlLoaderFile(name: string, scriptSrcs: string[]) {

export function getScriptLoaderFile(
scriptFileName: string,
outputChunkFileName: string
inputFileNames: string[]
): {
fileName: string;
source: string;
} {
const outputFile = getOutputFileName(scriptFileName);

const importPath = outputChunkFileName.startsWith("http")
? `'${outputChunkFileName}'`
: `chrome.runtime.getURL("${outputChunkFileName}")`;
const importStatements = inputFileNames
.filter((fileName) => Boolean(fileName))
.map((fileName) => {
return fileName.startsWith("http")
? `"${fileName}"`
: `chrome.runtime.getURL("${fileName}")`;
})
.map((importPath) => `await import(${importPath})`)
.join(";");

return {
fileName: `${outputFile}.js`,
source: `(async()=>{await import(${importPath})})();`,
source: `(async()=>{${importStatements}})();`,
};
}

export function getServiceWorkerLoaderFile(serviceWorkerFileName: string) {
const importPath = serviceWorkerFileName.startsWith("http")
? `${serviceWorkerFileName}`
: `/${serviceWorkerFileName}`;
export function getServiceWorkerLoaderFile(inputFileNames: string[]) {
const importStatements = inputFileNames
.filter((fileName) => Boolean(fileName))
.map((fileName) => {
return fileName.startsWith("http") ? fileName : `/${fileName}`;
})
.map((importPath) => `import "${importPath}";`)
.join("\n");

return {
fileName: `serviceWorker.js`,
source: `import "${importPath}";`,
source: importStatements,
};
}

Expand All @@ -52,5 +62,5 @@ export function getScriptLoaderForOutputChunk(
return null;
}

return getScriptLoaderFile(contentScriptFileName, chunk.fileName);
return getScriptLoaderFile(contentScriptFileName, [chunk.fileName]);
}

0 comments on commit c0edbab

Please sign in to comment.