File size: 4,452 Bytes
bc20498 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 |
import Stats from '../Stats.js';
import parse from '../parse/index.js';
import render_dom from './render_dom/index.js';
import render_ssr from './render_ssr/index.js';
import Component from './Component.js';
import fuzzymatch from '../utils/fuzzymatch.js';
import get_name_from_filename from './utils/get_name_from_filename.js';
import { valid_namespaces } from '../utils/namespaces.js';
const valid_options = [
'name',
'filename',
'sourcemap',
'enableSourcemap',
'generate',
'errorMode',
'varsReport',
'outputFilename',
'cssOutputFilename',
'sveltePath',
'dev',
'accessors',
'immutable',
'hydratable',
'legacy',
'customElement',
'namespace',
'tag',
'css',
'loopGuardTimeout',
'preserveComments',
'preserveWhitespace',
'cssHash',
'discloseVersion'
];
const valid_css_values = [true, false, 'injected', 'external', 'none'];
const regex_valid_identifier = /^[a-zA-Z_$][a-zA-Z_$0-9]*$/;
const regex_starts_with_lowercase_character = /^[a-z]/;
let warned_of_format = false;
let warned_boolean_css = false;
/**
* @param {import('../interfaces.js').CompileOptions} options
* @param {import('../interfaces.js').Warning[]} warnings
*/
function validate_options(options, warnings) {
if (/** @type {any} */ (options).format) {
if (!warned_of_format) {
warned_of_format = true;
console.warn(
'The format option has been removed in Svelte 4, the compiler only outputs ESM now. Remove "format" from your compiler options. ' +
'If you did not set this yourself, bump the version of your bundler plugin (vite-plugin-svelte/rollup-plugin-svelte/svelte-loader)'
);
}
delete (/** @type {any} */ (options).format);
}
const { name, filename, loopGuardTimeout, dev, namespace, css } = options;
Object.keys(options).forEach((key) => {
if (!valid_options.includes(key)) {
const match = fuzzymatch(key, valid_options);
let message = `Unrecognized option '${key}'`;
if (match) message += ` (did you mean '${match}'?)`;
throw new Error(message);
}
});
if (name && !regex_valid_identifier.test(name)) {
throw new Error(`options.name must be a valid identifier (got '${name}')`);
}
if (name && regex_starts_with_lowercase_character.test(name)) {
const message = 'options.name should be capitalised';
warnings.push({
code: 'options-lowercase-name',
message,
filename,
toString: () => message
});
}
if (loopGuardTimeout && !dev) {
const message = 'options.loopGuardTimeout is for options.dev = true only';
warnings.push({
code: 'options-loop-guard-timeout',
message,
filename,
toString: () => message
});
}
if (css === true || css === false) {
options.css = css === true ? 'injected' : 'external';
if (!warned_boolean_css) {
console.warn(
`compilerOptions.css as a boolean is deprecated. Use '${options.css}' instead of ${css}.`
);
warned_boolean_css = true;
}
}
if (!valid_css_values.includes(options.css)) {
throw new Error(
`compilerOptions.css must be 'injected', 'external' or 'none' (got '${options.css}').`
);
}
if (namespace && valid_namespaces.indexOf(namespace) === -1) {
const match = fuzzymatch(namespace, valid_namespaces);
if (match) {
throw new Error(`Invalid namespace '${namespace}' (did you mean '${match}'?)`);
} else {
throw new Error(`Invalid namespace '${namespace}'`);
}
}
if (options.discloseVersion == undefined) {
options.discloseVersion = true;
}
}
/**
* `compile` takes your component source code, and turns it into a JavaScript module that exports a class.
*
* https://svelte.dev/docs/svelte-compiler#svelte-compile
* @param {string} source
* @param {import('../interfaces.js').CompileOptions} options
*/
export default function compile(source, options = {}) {
options = Object.assign(
{ generate: 'dom', dev: false, enableSourcemap: true, css: 'injected' },
options
);
const stats = new Stats();
const warnings = [];
validate_options(options, warnings);
stats.start('parse');
const ast = parse(source, options);
stats.stop('parse');
stats.start('create component');
const component = new Component(
ast,
source,
options.name || get_name_from_filename(options.filename) || 'Component',
options,
stats,
warnings
);
stats.stop('create component');
const result =
options.generate === false
? null
: options.generate === 'ssr'
? render_ssr(component, options)
: render_dom(component, options);
return component.generate(result);
}
|