@lynx-js/template-webpack-plugin
Version:
Simplifies creation of Lynx template files to serve your webpack bundles
338 lines (337 loc) • 9.66 kB
TypeScript
import { AsyncSeriesBailHook, AsyncSeriesWaterfallHook, SyncWaterfallHook } from '@rspack/lite-tapable';
import type { Asset, Compilation, Compiler } from 'webpack';
import type * as CSS from '@lynx-js/css-serializer';
import { cssChunksToMap } from './css/cssChunksToMap.js';
export type OriginManifest = Record<string, {
content: string;
size: number;
}>;
/**
* The options for encoding a Lynx bundle.
*
* @public
*/
export interface EncodeOptions {
manifest: Record<string, string | undefined>;
compilerOptions: Record<string, string | boolean>;
lepusCode: {
root: string | undefined;
lepusChunk: Record<string, string>;
};
customSections: Record<string, {
type?: 'lazy';
content: string | Record<string, unknown>;
}>;
[k: string]: unknown;
}
/**
* To allow other plugins to alter the Template, this plugin executes
* {@link https://github.com/webpack/tapable | tapable} hooks.
*
* @example
* ```js
* class MyPlugin {
* apply(compiler) {
* compiler.hooks.compilation.tap("MyPlugin", (compilation) => {
* console.log("The compiler is starting a new compilation...");
*
* LynxTemplatePlugin.getCompilationHooks(compilation).beforeEmit.tapAsync(
* "MyPlugin", // <-- Set a meaningful name here for stacktraces
* (data, cb) => {
* // Manipulate the content
* modifyTemplate(data.template)
* // Tell webpack to move on
* cb(null, data);
* },
* );
* });
* }
* }
* ```
*
* @public
*/
export interface TemplateHooks {
/**
* Get the real name of an async chunk. The files with the same `asyncChunkName` will be placed in the same template.
*
* @alpha
*/
asyncChunkName: SyncWaterfallHook<string>;
/**
* Called before the encode process. Can be used to modify the encode options.
*
* @alpha
*/
beforeEncode: AsyncSeriesWaterfallHook<{
encodeData: EncodeRawData;
filenameTemplate: string;
entryNames: string[];
}>;
/**
* Call the encode process.
*
* @alpha
*/
encode: AsyncSeriesBailHook<{
encodeOptions: EncodeOptions;
intermediate?: string;
}, {
buffer: Buffer;
debugInfo: string;
}>;
/**
* Called before the template is emitted. Can be used to modify the template.
*
* @alpha
*/
beforeEmit: AsyncSeriesWaterfallHook<{
finalEncodeOptions: EncodeOptions;
debugInfo: string;
template: Buffer;
outputName: string;
mainThreadAssets: Asset[];
cssChunks: Asset[];
}>;
/**
* Called after the template is emitted.
*
* @alpha
*/
afterEmit: AsyncSeriesWaterfallHook<{
outputName: string;
}>;
}
/**
* The options for LynxTemplatePlugin
*
* @public
*/
export interface LynxTemplatePluginOptions {
/**
* The file to write the template to.
* Supports subdirectories eg: `assets/template.js`.
* [name] will be replaced by the entry name.
* Supports a function to generate the name.
*
* @defaultValue `'[name].bundle'`
*/
filename?: string | ((entryName: string) => string);
/**
* The filename of the lazy bundle.
*
* @defaultValue `'async/[name].[fullhash].bundle'`
*/
lazyBundleFilename?: string;
/**
* {@inheritdoc @lynx-js/rspeedy#DistPath.intermediate}
*/
intermediate?: string;
/**
* List all entries which should be injected
*
* @defaultValue `'all'`
*/
chunks?: 'all' | string[];
/**
* List all entries which should not be injected
*
* @defaultValue `[]`
*/
excludeChunks?: string[];
/**
* {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.customCSSInheritanceList}
*
* @example
*
* By setting `customCSSInheritanceList: ['direction', 'overflow']`, only the `direction` and `overflow` properties are inheritable.
*
* ```js
* import { defineConfig } from '@lynx-js/rspeedy'
*
* export default defineConfig({
* plugins: [
* pluginReactLynx({
* enableCSSInheritance: true,
* customCSSInheritanceList: ['direction', 'overflow']
* }),
* ],
* }
* ```
*/
customCSSInheritanceList: string[] | undefined;
/**
* {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.debugInfoOutside}
*/
debugInfoOutside: boolean;
/**
* {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.defaultDisplayLinear}
*/
defaultDisplayLinear: boolean;
/**
* Declare the current dsl to the encoder.
*
* @public
*/
dsl?: 'tt' | 'react' | 'react_nodiff';
/**
* {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableAccessibilityElement}
*/
enableAccessibilityElement: boolean;
/**
* {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableICU}
*/
enableICU: boolean;
/**
* Use Android View level APIs and system implementations.
*/
enableA11y: boolean;
/**
* {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableCSSInheritance}
*/
enableCSSInheritance: boolean;
/**
* {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableCSSInvalidation}
*/
enableCSSInvalidation: boolean;
/**
* {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableCSSSelector}
*/
enableCSSSelector: boolean;
/**
* {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableNewGesture}
*/
enableNewGesture: boolean;
/**
* {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableParallelElement}
*/
enableParallelElement?: boolean;
/**
* {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableRemoveCSSScope}
*/
enableRemoveCSSScope: boolean;
/**
* {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.pipelineSchedulerConfig}
*/
pipelineSchedulerConfig: number;
/**
* {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.removeDescendantSelectorScope}
*/
removeDescendantSelectorScope: boolean;
/**
* {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.targetSdkVersion}
*/
targetSdkVersion: string;
/**
* When enabled, the default overflow CSS property for views and components will be `'visible'`. Otherwise, it will be `'hidden'`.
*
* @defaultValue `true`
*/
defaultOverflowVisible?: boolean;
/**
* {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.experimental_isLazyBundle}
*
* @alpha
*/
experimental_isLazyBundle?: boolean;
/**
* plugins passed to parser
*/
cssPlugins: CSS.Plugin[];
}
interface EncodeRawData {
compilerOptions: {
enableCSSSelector: boolean;
targetSdkVersion: string;
[k: string]: string | boolean;
};
/**
* main-thread
*/
lepusCode: {
root: Asset | undefined;
chunks: Asset[];
};
/**
* background thread
*/
manifest: Record<string, string>;
css: {
chunks: Asset[];
} & ReturnType<typeof cssChunksToMap>;
customSections: Record<string, {
type?: 'lazy';
content: string | Record<string, unknown>;
}>;
sourceContent: {
dsl: string;
appType: string;
config: Record<string, unknown>;
};
[k: string]: unknown;
}
/**
* LynxTemplatePlugin
*
* @public
*/
export declare class LynxTemplatePlugin {
private options?;
constructor(options?: LynxTemplatePluginOptions | undefined);
/**
* Returns all public hooks of the Lynx template webpack plugin for the given compilation
*/
static getLynxTemplatePluginHooks(compilation: Compilation): TemplateHooks;
/**
* `defaultOptions` is the default options that the {@link LynxTemplatePlugin} uses.
*
* @example
* `defaultOptions` can be used to change part of the option and keep others as the default value.
*
* ```js
* // webpack.config.js
* import { LynxTemplatePlugin } from '@lynx-js/template-webpack-plugin'
* export default {
* plugins: [
* new LynxTemplatePlugin({
* ...LynxTemplatePlugin.defaultOptions,
* enableRemoveCSSScope: true,
* }),
* ],
* }
* ```
*
* @public
*/
static defaultOptions: Readonly<Required<LynxTemplatePluginOptions>>;
/**
* Convert the css chunks to css map.
*
* @param cssChunks - The CSS chunks content.
* @param options - The encode options.
* @returns The CSS map and css source.
*
* @example
* ```
* (console.log(await convertCSSChunksToMap(
* '.red { color: red; }',
* {
* targetSdkVersion: '3.2',
* enableCSSSelector: true,
* },
* )));
* ```
*/
static convertCSSChunksToMap(cssChunks: string[], plugins: CSS.Plugin[], enableCSSSelector: boolean): {
cssMap: Record<string, CSS.LynxStyleNode[]>;
cssSource: Record<string, string>;
};
/**
* The entry point of a webpack plugin.
* @param compiler - the webpack compiler
*/
apply(compiler: Compiler): void;
}
export declare function isDebug(): boolean;
export declare function isRsdoctor(): boolean;
export {};