Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(webpack): add cacheProvider for Linaria v3 (#889)
- Loading branch information
Showing
7 changed files
with
172 additions
and
49 deletions.
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
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,45 @@ | ||
| export interface ICache { | ||
| get: (key: string) => Promise<string>; | ||
| set: (key: string, value: string) => Promise<void>; | ||
| } | ||
|
|
||
| // memory cache, which is the default cache implementation in Linaria | ||
|
|
||
| class MemoryCache implements ICache { | ||
| private cache: Map<string, string> = new Map(); | ||
|
|
||
| public get(key: string): Promise<string> { | ||
| return Promise.resolve(this.cache.get(key) ?? ''); | ||
| } | ||
|
|
||
| public set(key: string, value: string): Promise<void> { | ||
| this.cache.set(key, value); | ||
| return Promise.resolve(); | ||
| } | ||
| } | ||
|
|
||
| export const memoryCache = new MemoryCache(); | ||
|
|
||
| /** | ||
| * return cache instance from `options.cacheProvider` | ||
| * @param cacheProvider string | ICache | undefined | ||
| * @returns ICache instance | ||
| */ | ||
| export const getCacheInstance = async ( | ||
| cacheProvider: string | ICache | undefined | ||
| ): Promise<ICache> => { | ||
| if (!cacheProvider) { | ||
| return memoryCache; | ||
| } | ||
| if (typeof cacheProvider === 'string') { | ||
| return require(cacheProvider); | ||
| } | ||
| if ( | ||
| typeof cacheProvider === 'object' && | ||
| 'get' in cacheProvider && | ||
| 'set' in cacheProvider | ||
| ) { | ||
| return cacheProvider; | ||
| } | ||
| throw new Error(`Invalid cache provider: ${cacheProvider}`); | ||
| }; |
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
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 |
|---|---|---|
| @@ -1,9 +1,13 @@ | ||
| const cssLookup = new Map<string, string>(); | ||
| import loaderUtils from 'loader-utils'; | ||
| import { getCacheInstance } from './cache'; | ||
|
|
||
| export const addFile = (id: string, content: string) => { | ||
| cssLookup.set(id, content); | ||
| }; | ||
| type LoaderContext = Parameters<typeof loaderUtils.getOptions>[0]; | ||
|
|
||
| export default function outputCssLoader(this: { resourcePath: string }) { | ||
| return cssLookup.get(this.resourcePath) ?? ''; | ||
| export default function outputCssLoader(this: LoaderContext) { | ||
| this.async(); | ||
| const { cacheProvider } = loaderUtils.getOptions(this) || {}; | ||
| getCacheInstance(cacheProvider) | ||
| .then((cacheInstance) => cacheInstance.get(this.resourcePath)) | ||
| .then((result) => this.callback(null, result)) | ||
| .catch((err: Error) => this.callback(err)); | ||
| } |
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,45 @@ | ||
| export interface ICache { | ||
| get: (key: string) => Promise<string>; | ||
| set: (key: string, value: string) => Promise<void>; | ||
| } | ||
|
|
||
| // memory cache, which is the default cache implementation in Linaria | ||
|
|
||
| class MemoryCache implements ICache { | ||
| private cache: Map<string, string> = new Map(); | ||
|
|
||
| public get(key: string): Promise<string> { | ||
| return Promise.resolve(this.cache.get(key) ?? ''); | ||
| } | ||
|
|
||
| public set(key: string, value: string): Promise<void> { | ||
| this.cache.set(key, value); | ||
| return Promise.resolve(); | ||
| } | ||
| } | ||
|
|
||
| export const memoryCache = new MemoryCache(); | ||
|
|
||
| /** | ||
| * return cache instance from `options.cacheProvider` | ||
| * @param cacheProvider string | ICache | undefined | ||
| * @returns ICache instance | ||
| */ | ||
| export const getCacheInstance = async ( | ||
| cacheProvider: string | ICache | undefined | ||
| ): Promise<ICache> => { | ||
| if (!cacheProvider) { | ||
| return memoryCache; | ||
| } | ||
| if (typeof cacheProvider === 'string') { | ||
| return require(cacheProvider); | ||
| } | ||
| if ( | ||
| typeof cacheProvider === 'object' && | ||
| 'get' in cacheProvider && | ||
| 'set' in cacheProvider | ||
| ) { | ||
| return cacheProvider; | ||
| } | ||
| throw new Error(`Invalid cache provider: ${cacheProvider}`); | ||
| }; |
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
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 |
|---|---|---|
| @@ -1,9 +1,13 @@ | ||
| const cssLookup = new Map<string, string>(); | ||
| import webpack from 'webpack'; | ||
| import { getCacheInstance, ICache } from './cache'; | ||
|
|
||
| export const addFile = (id: string, content: string) => { | ||
| cssLookup.set(id, content); | ||
| }; | ||
|
|
||
| export default function outputCssLoader(this: { resourcePath: string }) { | ||
| return cssLookup.get(this.resourcePath) ?? ''; | ||
| export default function outputCssLoader( | ||
| this: webpack.LoaderContext<{ cacheProvider: string | ICache | undefined }> | ||
| ) { | ||
| this.async(); | ||
| const { cacheProvider } = this.getOptions(); | ||
| getCacheInstance(cacheProvider) | ||
| .then((cacheInstance) => cacheInstance.get(this.resourcePath)) | ||
| .then((result) => this.callback(null, result)) | ||
| .catch((err: Error) => this.callback(err)); | ||
| } |