mirror of https://github.com/sveltejs/svelte
Simon Holthausen
3 years ago
parent
1069a2be21
commit
a172a75427
@ -1,265 +1,270 @@
|
|||||||
import type { RawSourceMap, DecodedSourceMap } from '@ampproject/remapping';
|
|
||||||
import { getLocator } from 'locate-character';
|
import { getLocator } from 'locate-character';
|
||||||
import {
|
import { MappedCode, parse_attached_sourcemap, sourcemap_add_offset, combine_sourcemaps } from '../utils/mapped_code';
|
||||||
MappedCode,
|
import { decode_map } from './decode_sourcemap.js';
|
||||||
SourceLocation,
|
|
||||||
parse_attached_sourcemap,
|
|
||||||
sourcemap_add_offset,
|
|
||||||
combine_sourcemaps
|
|
||||||
} from '../utils/mapped_code';
|
|
||||||
import { decode_map } from './decode_sourcemap';
|
|
||||||
import { replace_in_code, slice_source } from './replace_in_code';
|
import { replace_in_code, slice_source } from './replace_in_code';
|
||||||
import { MarkupPreprocessor, Source, Preprocessor, PreprocessorGroup, Processed } from './types';
|
|
||||||
import { regex_whitespaces } from '../utils/patterns';
|
import { regex_whitespaces } from '../utils/patterns';
|
||||||
|
|
||||||
export * from './types';
|
export * from './types';
|
||||||
|
|
||||||
interface SourceUpdate {
|
|
||||||
string?: string;
|
|
||||||
map?: DecodedSourceMap;
|
|
||||||
dependencies?: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
const regex_filepath_separator = /[/\\]/;
|
const regex_filepath_separator = /[/\\]/;
|
||||||
|
|
||||||
function get_file_basename(filename: string) {
|
/**
|
||||||
return filename.split(regex_filepath_separator).pop();
|
* @param {string} filename
|
||||||
|
*/
|
||||||
|
function get_file_basename(filename) {
|
||||||
|
return filename.split(regex_filepath_separator).pop();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Represents intermediate states of the preprocessing.
|
* Represents intermediate states of the preprocessing.
|
||||||
*/
|
*/
|
||||||
class PreprocessResult implements Source {
|
class PreprocessResult {
|
||||||
// sourcemap_list is sorted in reverse order from last map (index 0) to first map (index -1)
|
source;
|
||||||
// so we use sourcemap_list.unshift() to add new maps
|
filename;
|
||||||
// https://github.com/ampproject/remapping#multiple-transformations-of-a-file
|
// sourcemap_list is sorted in reverse order from last map (index 0) to first map (index -1)
|
||||||
sourcemap_list: Array<DecodedSourceMap | RawSourceMap> = [];
|
// so we use sourcemap_list.unshift() to add new maps
|
||||||
dependencies: string[] = [];
|
// https://github.com/ampproject/remapping#multiple-transformations-of-a-file
|
||||||
file_basename: string;
|
|
||||||
|
/**
|
||||||
get_location: ReturnType<typeof getLocator>;
|
* @default []
|
||||||
|
* @type {Array<DecodedSourceMap | RawSourceMap>}
|
||||||
constructor(public source: string, public filename?: string) {
|
*/
|
||||||
this.update_source({ string: source });
|
sourcemap_list = [];
|
||||||
|
|
||||||
// preprocess source must be relative to itself or equal null
|
/**
|
||||||
this.file_basename = filename == null ? null : get_file_basename(filename);
|
* @default []
|
||||||
}
|
* @type {string[]}
|
||||||
|
*/
|
||||||
update_source({ string: source, map, dependencies }: SourceUpdate) {
|
dependencies = [];
|
||||||
if (source != null) {
|
|
||||||
this.source = source;
|
/**
|
||||||
this.get_location = getLocator(source);
|
* @type {string}
|
||||||
}
|
*/
|
||||||
|
file_basename = undefined;
|
||||||
if (map) {
|
|
||||||
this.sourcemap_list.unshift(map);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (dependencies) {
|
|
||||||
this.dependencies.push(...dependencies);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
to_processed(): Processed {
|
|
||||||
// Combine all the source maps for each preprocessor function into one
|
|
||||||
const map = combine_sourcemaps(this.file_basename, this.sourcemap_list);
|
|
||||||
|
|
||||||
return {
|
|
||||||
// TODO return separated output, in future version where svelte.compile supports it:
|
|
||||||
// style: { code: styleCode, map: styleMap },
|
|
||||||
// script { code: scriptCode, map: scriptMap },
|
|
||||||
// markup { code: markupCode, map: markupMap },
|
|
||||||
|
|
||||||
code: this.source,
|
/**
|
||||||
dependencies: [...new Set(this.dependencies)],
|
* @type {Class<getLocator>>}
|
||||||
map: map as object,
|
*/
|
||||||
toString: () => this.source
|
get_location = undefined;
|
||||||
};
|
constructor(source, filename) {
|
||||||
}
|
this.source = source;
|
||||||
|
this.filename = filename;
|
||||||
|
this.update_source({ string: source });
|
||||||
|
// preprocess source must be relative to itself or equal null
|
||||||
|
this.file_basename = filename == null ? null : get_file_basename(filename);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {SourceUpdate}
|
||||||
|
*/
|
||||||
|
update_source({ string: source, map, dependencies }) {
|
||||||
|
if (source != null) {
|
||||||
|
this.source = source;
|
||||||
|
this.get_location = getLocator(source);
|
||||||
|
}
|
||||||
|
if (map) {
|
||||||
|
this.sourcemap_list.unshift(map);
|
||||||
|
}
|
||||||
|
if (dependencies) {
|
||||||
|
this.dependencies.push(...dependencies);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @returns {Processed}
|
||||||
|
*/
|
||||||
|
to_processed() {
|
||||||
|
// Combine all the source maps for each preprocessor function into one
|
||||||
|
const map = combine_sourcemaps(this.file_basename, this.sourcemap_list);
|
||||||
|
return {
|
||||||
|
// TODO return separated output, in future version where svelte.compile supports it:
|
||||||
|
// style: { code: styleCode, map: styleMap },
|
||||||
|
// script { code: scriptCode, map: scriptMap },
|
||||||
|
// markup { code: markupCode, map: markupMap },
|
||||||
|
code: this.source,
|
||||||
|
dependencies: [...new Set(this.dependencies)],
|
||||||
|
map: map,
|
||||||
|
toString: () => this.source
|
||||||
|
};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Convert preprocessor output for the tag content into MappedCode
|
* Convert preprocessor output for the tag content into MappedCode
|
||||||
|
* @param {Processed} processed
|
||||||
|
* @param {SourceLocation} location
|
||||||
|
* @param {string} file_basename
|
||||||
|
* @returns {MappedCode}
|
||||||
*/
|
*/
|
||||||
function processed_content_to_code(
|
function processed_content_to_code(processed, location, file_basename) {
|
||||||
processed: Processed,
|
// Convert the preprocessed code and its sourcemap to a MappedCode
|
||||||
location: SourceLocation,
|
|
||||||
file_basename: string
|
|
||||||
): MappedCode {
|
|
||||||
// Convert the preprocessed code and its sourcemap to a MappedCode
|
|
||||||
let decoded_map: DecodedSourceMap;
|
|
||||||
if (processed.map) {
|
|
||||||
decoded_map = decode_map(processed);
|
|
||||||
|
|
||||||
// decoded map may not have sources for empty maps like `{ mappings: '' }`
|
|
||||||
if (decoded_map.sources) {
|
|
||||||
// offset only segments pointing at original component source
|
|
||||||
const source_index = decoded_map.sources.indexOf(file_basename);
|
|
||||||
if (source_index !== -1) {
|
|
||||||
sourcemap_add_offset(decoded_map, location, source_index);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return MappedCode.from_processed(processed.code, decoded_map);
|
/**
|
||||||
|
* @type {DecodedSourceMap}
|
||||||
|
*/
|
||||||
|
let decoded_map;
|
||||||
|
if (processed.map) {
|
||||||
|
decoded_map = decode_map(processed);
|
||||||
|
// decoded map may not have sources for empty maps like `{ mappings: '' }`
|
||||||
|
if (decoded_map.sources) {
|
||||||
|
// offset only segments pointing at original component source
|
||||||
|
const source_index = decoded_map.sources.indexOf(file_basename);
|
||||||
|
if (source_index !== -1) {
|
||||||
|
sourcemap_add_offset(decoded_map, location, source_index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return MappedCode.from_processed(processed.code, decoded_map);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Given the whole tag including content, return a `MappedCode`
|
* Given the whole tag including content, return a `MappedCode`
|
||||||
* representing the tag content replaced with `processed`.
|
* representing the tag content replaced with `processed`.
|
||||||
|
* @param {Processed} processed
|
||||||
|
* @param {'style' | 'script'} tag_name
|
||||||
|
* @param {string} attributes
|
||||||
|
* @param {Source} source
|
||||||
|
* @returns {MappedCode}
|
||||||
*/
|
*/
|
||||||
function processed_tag_to_code(
|
function processed_tag_to_code(processed, tag_name, attributes, source) {
|
||||||
processed: Processed,
|
const { file_basename, get_location } = source;
|
||||||
tag_name: 'style' | 'script',
|
|
||||||
attributes: string,
|
/**
|
||||||
source: Source
|
* @param {string} code
|
||||||
): MappedCode {
|
* @param {number} offset
|
||||||
const { file_basename, get_location } = source;
|
*/
|
||||||
|
const build_mapped_code = (code, offset) => MappedCode.from_source(slice_source(code, offset, source));
|
||||||
const build_mapped_code = (code: string, offset: number) =>
|
const tag_open = `<${tag_name}${attributes || ''}>`;
|
||||||
MappedCode.from_source(slice_source(code, offset, source));
|
const tag_close = `</${tag_name}>`;
|
||||||
|
const tag_open_code = build_mapped_code(tag_open, 0);
|
||||||
const tag_open = `<${tag_name}${attributes || ''}>`;
|
const tag_close_code = build_mapped_code(tag_close, tag_open.length + source.source.length);
|
||||||
const tag_close = `</${tag_name}>`;
|
parse_attached_sourcemap(processed, tag_name);
|
||||||
|
const content_code = processed_content_to_code(processed, get_location(tag_open.length), file_basename);
|
||||||
const tag_open_code = build_mapped_code(tag_open, 0);
|
return tag_open_code.concat(content_code).concat(tag_close_code);
|
||||||
const tag_close_code = build_mapped_code(tag_close, tag_open.length + source.source.length);
|
|
||||||
|
|
||||||
parse_attached_sourcemap(processed, tag_name);
|
|
||||||
|
|
||||||
const content_code = processed_content_to_code(
|
|
||||||
processed,
|
|
||||||
get_location(tag_open.length),
|
|
||||||
file_basename
|
|
||||||
);
|
|
||||||
|
|
||||||
return tag_open_code.concat(content_code).concat(tag_close_code);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const regex_quoted_value = /^['"](.*)['"]$/;
|
const regex_quoted_value = /^['"](.*)['"]$/;
|
||||||
|
|
||||||
function parse_tag_attributes(str: string) {
|
/**
|
||||||
// note: won't work with attribute values containing spaces.
|
* @param {string} str
|
||||||
return str
|
*/
|
||||||
.split(regex_whitespaces)
|
function parse_tag_attributes(str) {
|
||||||
.filter(Boolean)
|
// note: won't work with attribute values containing spaces.
|
||||||
.reduce((attrs, attr) => {
|
return str
|
||||||
const i = attr.indexOf('=');
|
.split(regex_whitespaces)
|
||||||
const [key, value] = i > 0 ? [attr.slice(0, i), attr.slice(i + 1)] : [attr];
|
.filter(Boolean)
|
||||||
const [, unquoted] = (value && value.match(regex_quoted_value)) || [];
|
.reduce((attrs, attr) => {
|
||||||
|
const i = attr.indexOf('=');
|
||||||
return { ...attrs, [key]: unquoted ?? value ?? true };
|
const [key, value] = i > 0 ? [attr.slice(0, i), attr.slice(i + 1)] : [attr];
|
||||||
}, {});
|
const [, unquoted] = (value && value.match(regex_quoted_value)) || [];
|
||||||
|
return { ...attrs, [key]: unquoted ?? value ?? true };
|
||||||
|
}, {});
|
||||||
}
|
}
|
||||||
|
|
||||||
const regex_style_tags = /<!--[^]*?-->|<style(\s[^]*?)?(?:>([^]*?)<\/style>|\/>)/gi;
|
const regex_style_tags = /<!--[^]*?-->|<style(\s[^]*?)?(?:>([^]*?)<\/style>|\/>)/gi;
|
||||||
const regex_script_tags = /<!--[^]*?-->|<script(\s[^]*?)?(?:>([^]*?)<\/script>|\/>)/gi;
|
const regex_script_tags = /<!--[^]*?-->|<script(\s[^]*?)?(?:>([^]*?)<\/script>|\/>)/gi;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Calculate the updates required to process all instances of the specified tag.
|
* Calculate the updates required to process all instances of the specified tag.
|
||||||
|
* @param {'style' | 'script'} tag_name
|
||||||
|
* @param {Preprocessor} preprocessor
|
||||||
|
* @param {Source} source
|
||||||
|
* @returns {Promise<SourceUpdate>}
|
||||||
*/
|
*/
|
||||||
async function process_tag(
|
async function process_tag(tag_name, preprocessor, source) {
|
||||||
tag_name: 'style' | 'script',
|
const { filename, source: markup } = source;
|
||||||
preprocessor: Preprocessor,
|
const tag_regex = tag_name === 'style' ? regex_style_tags : regex_script_tags;
|
||||||
source: Source
|
|
||||||
): Promise<SourceUpdate> {
|
|
||||||
const { filename, source: markup } = source;
|
|
||||||
const tag_regex = tag_name === 'style' ? regex_style_tags : regex_script_tags;
|
|
||||||
|
|
||||||
const dependencies: string[] = [];
|
|
||||||
|
|
||||||
async function process_single_tag(
|
|
||||||
tag_with_content: string,
|
|
||||||
attributes = '',
|
|
||||||
content = '',
|
|
||||||
tag_offset: number
|
|
||||||
): Promise<MappedCode> {
|
|
||||||
const no_change = () =>
|
|
||||||
MappedCode.from_source(slice_source(tag_with_content, tag_offset, source));
|
|
||||||
|
|
||||||
if (!attributes && !content) return no_change();
|
|
||||||
|
|
||||||
const processed = await preprocessor({
|
|
||||||
content: content || '',
|
|
||||||
attributes: parse_tag_attributes(attributes || ''),
|
|
||||||
markup,
|
|
||||||
filename
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!processed) return no_change();
|
|
||||||
if (processed.dependencies) dependencies.push(...processed.dependencies);
|
|
||||||
if (!processed.map && processed.code === content) return no_change();
|
|
||||||
|
|
||||||
return processed_tag_to_code(
|
|
||||||
processed,
|
|
||||||
tag_name,
|
|
||||||
attributes,
|
|
||||||
slice_source(content, tag_offset, source)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const { string, map } = await replace_in_code(tag_regex, process_single_tag, source);
|
|
||||||
|
|
||||||
return { string, map, dependencies };
|
/**
|
||||||
|
* @type {string[]}
|
||||||
|
*/
|
||||||
|
const dependencies = [];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string} tag_with_content
|
||||||
|
* @param {number} tag_offset
|
||||||
|
* @returns {Promise<MappedCode>}
|
||||||
|
*/
|
||||||
|
async function process_single_tag(tag_with_content, attributes = '', content = '', tag_offset) {
|
||||||
|
const no_change = () => MappedCode.from_source(slice_source(tag_with_content, tag_offset, source));
|
||||||
|
if (!attributes && !content)
|
||||||
|
return no_change();
|
||||||
|
const processed = await preprocessor({
|
||||||
|
content: content || '',
|
||||||
|
attributes: parse_tag_attributes(attributes || ''),
|
||||||
|
markup,
|
||||||
|
filename
|
||||||
|
});
|
||||||
|
if (!processed)
|
||||||
|
return no_change();
|
||||||
|
if (processed.dependencies)
|
||||||
|
dependencies.push(...processed.dependencies);
|
||||||
|
if (!processed.map && processed.code === content)
|
||||||
|
return no_change();
|
||||||
|
return processed_tag_to_code(processed, tag_name, attributes, slice_source(content, tag_offset, source));
|
||||||
|
}
|
||||||
|
const { string, map } = await replace_in_code(tag_regex, process_single_tag, source);
|
||||||
|
return { string, map, dependencies };
|
||||||
}
|
}
|
||||||
|
|
||||||
async function process_markup(process: MarkupPreprocessor, source: Source) {
|
/**
|
||||||
const processed = await process({
|
* @param {MarkupPreprocessor} process
|
||||||
content: source.source,
|
* @param {Source} source
|
||||||
filename: source.filename
|
*/
|
||||||
});
|
async function process_markup(process, source) {
|
||||||
|
const processed = await process({
|
||||||
if (processed) {
|
content: source.source,
|
||||||
return {
|
filename: source.filename
|
||||||
string: processed.code,
|
});
|
||||||
map: processed.map
|
if (processed) {
|
||||||
? // TODO: can we use decode_sourcemap?
|
return {
|
||||||
typeof processed.map === 'string'
|
string: processed.code,
|
||||||
? JSON.parse(processed.map)
|
map: processed.map
|
||||||
: processed.map
|
? // TODO: can we use decode_sourcemap?
|
||||||
: undefined,
|
typeof processed.map === 'string'
|
||||||
dependencies: processed.dependencies
|
? JSON.parse(processed.map)
|
||||||
};
|
: processed.map
|
||||||
} else {
|
: undefined,
|
||||||
return {};
|
dependencies: processed.dependencies
|
||||||
}
|
};
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default async function preprocess(
|
/**
|
||||||
source: string,
|
* @param {string} source
|
||||||
preprocessor: PreprocessorGroup | PreprocessorGroup[],
|
* @param {PreprocessorGroup | PreprocessorGroup[]} preprocessor
|
||||||
options?: { filename?: string }
|
* @param {{ filename?: string }} options
|
||||||
): Promise<Processed> {
|
* @returns {Promise<Processed>}
|
||||||
const filename: string | undefined =
|
*/
|
||||||
(options && options.filename) || (preprocessor as any).filename; // legacy
|
export default async function preprocess(source, preprocessor, options) {
|
||||||
|
|
||||||
const preprocessors = preprocessor
|
|
||||||
? Array.isArray(preprocessor)
|
|
||||||
? preprocessor
|
|
||||||
: [preprocessor]
|
|
||||||
: [];
|
|
||||||
|
|
||||||
const markup = preprocessors.map((p) => p.markup).filter(Boolean);
|
|
||||||
const script = preprocessors.map((p) => p.script).filter(Boolean);
|
|
||||||
const style = preprocessors.map((p) => p.style).filter(Boolean);
|
|
||||||
|
|
||||||
const result = new PreprocessResult(source, filename);
|
|
||||||
|
|
||||||
// TODO keep track: what preprocessor generated what sourcemap?
|
/**
|
||||||
// to make debugging easier = detect low-resolution sourcemaps in fn combine_mappings
|
* @type {string | undefined}
|
||||||
|
*/
|
||||||
|
const filename = (options && options.filename) || preprocessor.filename; // legacy
|
||||||
|
const preprocessors = preprocessor
|
||||||
|
? Array.isArray(preprocessor)
|
||||||
|
? preprocessor
|
||||||
|
: [preprocessor]
|
||||||
|
: [];
|
||||||
|
const markup = preprocessors.map((p) => p.markup).filter(Boolean);
|
||||||
|
const script = preprocessors.map((p) => p.script).filter(Boolean);
|
||||||
|
const style = preprocessors.map((p) => p.style).filter(Boolean);
|
||||||
|
const result = new PreprocessResult(source, filename);
|
||||||
|
// TODO keep track: what preprocessor generated what sourcemap?
|
||||||
|
// to make debugging easier = detect low-resolution sourcemaps in fn combine_mappings
|
||||||
|
for (const process of markup) {
|
||||||
|
result.update_source(await process_markup(process, result));
|
||||||
|
}
|
||||||
|
for (const process of script) {
|
||||||
|
result.update_source(await process_tag('script', process, result));
|
||||||
|
}
|
||||||
|
for (const preprocess of style) {
|
||||||
|
result.update_source(await process_tag('style', preprocess, result));
|
||||||
|
}
|
||||||
|
return result.to_processed();
|
||||||
|
}
|
||||||
|
|
||||||
for (const process of markup) {
|
|
||||||
result.update_source(await process_markup(process, result));
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const process of script) {
|
|
||||||
result.update_source(await process_tag('script', process, result));
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const preprocess of style) {
|
|
||||||
result.update_source(await process_tag('style', preprocess, result));
|
|
||||||
}
|
|
||||||
|
|
||||||
return result.to_processed();
|
/** @typedef {Object} SourceUpdate
|
||||||
}
|
* @property {string} [string]
|
||||||
|
* @property {DecodedSourceMap} [map]
|
||||||
|
* @property {string[]} [dependencies]
|
||||||
|
*/
|
||||||
Loading…
Reference in new issue