@vuebro/loader-sfc 2.2.4 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/loader-sfc.d.ts +3 -1
  2. package/dist/loader-sfc.esm-browser.prod.js +5906 -5734
  3. package/dist/loader-sfc.js +79 -38
  4. package/package.json +2 -1
package/dist/loader-sfc.js CHANGED
@@ -1,7 +1,10 @@
1
+ import { consola } from "consola/browser";
1
2
  import hash from "hash-sum";
2
3
  import { transform } from "sucrase";
3
4
  import { compileScript, compileStyleAsync, compileTemplate, parse, } from "vue/compiler-sfc";
4
5
  /* -------------------------------------------------------------------------- */
6
+ /* Служебные функции */
7
+ /* -------------------------------------------------------------------------- */
5
8
  const fetchText = async (url) => {
6
9
  try {
7
10
  const response = await fetch(url);
@@ -20,37 +23,38 @@ const fetchText = async (url) => {
20
23
  }
21
24
  };
22
25
  /* -------------------------------------------------------------------------- */
26
+ /* Функция загрузки файла с компонентом Vue */
27
+ /* -------------------------------------------------------------------------- */
23
28
  export default async (filename, { parseOptions, scriptOptions: { templateOptions: { compilerOptions: { expressionPlugins, ...restCompilerOptions } = {}, ...restTemplateOptions } = {}, ...restScriptOptions } = {}, styleOptions, } = {}) => {
24
- const styleErrors = [], { descriptor, errors: parseErrors } = parse((await (await fetchText(filename)).text()) || "<template></template>", parseOptions), { script, scriptSetup, slotted, styles, template } = descriptor;
25
- let moduleWarning = "";
26
- const id = `data-v-${hash(filename)}`, langs = new Set([script, scriptSetup].flatMap((scriptBlock) => {
29
+ /* -------------------------------------------------------------------------- */
30
+ /* Генерация уникального идентификатора */
31
+ /* -------------------------------------------------------------------------- */
32
+ const id = `data-v-${hash(filename)}`;
33
+ /* -------------------------------------------------------------------------- */
34
+ /* Загрузка и парсинг файла с компонентом Vue */
35
+ /* -------------------------------------------------------------------------- */
36
+ const { descriptor, errors: parseErrors } = parse((await (await fetchText(filename)).text()) || "<template></template>", { filename, ...parseOptions });
37
+ /* -------------------------------------------------------------------------- */
38
+ /* Обработка полученных данных */
39
+ /* -------------------------------------------------------------------------- */
40
+ const { script, scriptSetup, slotted, styles, template } = descriptor;
41
+ const langs = new Set([script, scriptSetup].flatMap((scriptBlock) => {
27
42
  const { lang = "js" } = scriptBlock ?? {};
28
43
  return [
29
44
  ...(/[jt]sx$/.test(lang) ? ["jsx"] : []),
30
45
  ...(/tsx?$/.test(lang) ? ["typescript"] : []),
31
46
  ];
32
- })), compilerOptions = {
33
- expressionPlugins: [
34
- ...new Set([...(expressionPlugins ?? []), ...langs]),
35
- ],
36
- scopeId: id,
37
- slotted,
38
- ...restCompilerOptions,
39
- }, scoped = styles.some(({ scoped }) => scoped), component = scoped ? { __scopeId: id } : {}, templateOptions = {
40
- compilerOptions,
41
- scoped,
42
- slotted,
43
- ...restTemplateOptions,
44
- }, scriptOptions = {
45
- id,
46
- templateOptions,
47
- ...restScriptOptions,
48
- }, style = !(document.getElementById(id) instanceof HTMLStyleElement)
47
+ })), { ast, content: source = "" } = template ?? {};
48
+ /* -------------------------------------------------------------------------- */
49
+ /* Загрузка и компилирование стилей */
50
+ /* -------------------------------------------------------------------------- */
51
+ let styleWarning;
52
+ const styleErrors = [];
53
+ const style = !(document.getElementById(id) instanceof HTMLStyleElement)
49
54
  ? Promise.all(styles.map(async ({ content, module, scoped = false, src }) => {
50
55
  const modules = !!module;
51
56
  if (modules) {
52
- moduleWarning =
53
- "<style module> is not supported in the playground.";
57
+ styleWarning = "<style module> is not supported in the playground.";
54
58
  return "";
55
59
  }
56
60
  else {
@@ -66,12 +70,45 @@ export default async (filename, { parseOptions, scriptOptions: { templateOptions
66
70
  return code;
67
71
  }
68
72
  }))
69
- : Promise.resolve([]), sucraseOptions = {
73
+ : Promise.resolve([]);
74
+ /* -------------------------------------------------------------------------- */
75
+ /* Подготовка настроек */
76
+ /* -------------------------------------------------------------------------- */
77
+ const compilerOptions = {
78
+ expressionPlugins: [
79
+ ...new Set([...(expressionPlugins ?? []), ...langs]),
80
+ ],
81
+ filename,
82
+ scopeId: id,
83
+ slotted,
84
+ ...restCompilerOptions,
85
+ }, templateOptions = {
86
+ compilerOptions,
87
+ filename,
88
+ id,
89
+ scoped: styles.some(({ scoped }) => scoped),
90
+ slotted,
91
+ ...restTemplateOptions,
92
+ }, scriptOptions = {
93
+ id,
94
+ templateOptions,
95
+ ...restScriptOptions,
96
+ }, sucraseOptions = {
70
97
  jsxRuntime: "preserve",
71
98
  transforms: [...langs],
72
- }, { ast, content: source = "" } = template ?? {}, { bindings, content, warnings: scriptWarnings, } = script || scriptSetup ? compileScript(descriptor, scriptOptions) : {};
99
+ };
100
+ /* -------------------------------------------------------------------------- */
101
+ /* Компиляция скрипта */
102
+ /* -------------------------------------------------------------------------- */
103
+ const { bindings, content, warnings: scriptWarnings, } = script || scriptSetup ? compileScript(descriptor, scriptOptions) : {};
104
+ /* -------------------------------------------------------------------------- */
105
+ /* Связывание метаданных */
106
+ /* -------------------------------------------------------------------------- */
73
107
  if (bindings)
74
108
  compilerOptions.bindingMetadata = bindings;
109
+ /* -------------------------------------------------------------------------- */
110
+ /* Компиляция шаблона */
111
+ /* -------------------------------------------------------------------------- */
75
112
  const { code, errors: templateErrors, tips: templateTips, } = template && (!scriptSetup || !scriptOptions.inlineTemplate)
76
113
  ? compileTemplate({
77
114
  ...ast,
@@ -81,6 +118,15 @@ export default async (filename, { parseOptions, scriptOptions: { templateOptions
81
118
  ...templateOptions,
82
119
  })
83
120
  : {};
121
+ /* -------------------------------------------------------------------------- */
122
+ /* Вывод ошибок, предупреждений и подсказок */
123
+ /* -------------------------------------------------------------------------- */
124
+ consola.error(parseErrors, templateErrors, styleErrors);
125
+ consola.warn(scriptWarnings, styleWarning);
126
+ consola.info(templateTips);
127
+ /* -------------------------------------------------------------------------- */
128
+ /* Получение и обработка результатов */
129
+ /* -------------------------------------------------------------------------- */
84
130
  const [styleResult, scriptResult, templateResult] = await Promise.all([
85
131
  style,
86
132
  content
@@ -89,24 +135,19 @@ export default async (filename, { parseOptions, scriptOptions: { templateOptions
89
135
  code
90
136
  ? inject(langs.size ? transform(code, sucraseOptions).code : code)
91
137
  : Promise.resolve(undefined),
92
- ]), textContent = styleResult.join("\n").trim();
138
+ ]);
139
+ /* -------------------------------------------------------------------------- */
140
+ /* Внедрение стилей в документ */
141
+ /* -------------------------------------------------------------------------- */
142
+ const textContent = styleResult.join("\n").trim();
93
143
  if (textContent) {
94
144
  const el = document.createElement("style");
95
145
  el.id = id;
96
146
  el.textContent = textContent;
97
147
  document.head.appendChild(el);
98
148
  }
99
- Object.assign(component, scriptResult?.default);
100
- Object.assign(component, templateResult);
101
- [
102
- ...parseErrors,
103
- ...(scriptWarnings ?? []),
104
- ...(templateTips ?? []),
105
- ...(templateErrors ?? []),
106
- ...styleErrors,
107
- ...(moduleWarning ? [moduleWarning] : []),
108
- ].forEach((msg) => {
109
- console.log(msg);
110
- });
111
- return component;
149
+ /* -------------------------------------------------------------------------- */
150
+ /* Формирование возвращаемого компонента */
151
+ /* -------------------------------------------------------------------------- */
152
+ return { __scopeId: id, ...scriptResult?.default, ...templateResult };
112
153
  };
package/package.json CHANGED
@@ -21,7 +21,7 @@
21
21
  "url": "git+https://github.com/vuebro/loader-sfc.git"
22
22
  },
23
23
  "license": "AGPL-3.0-only",
24
- "version": "2.2.4",
24
+ "version": "2.3.0",
25
25
  "type": "module",
26
26
  "main": "./dist/loader-sfc.js",
27
27
  "types": "./dist/loader-sfc.d.ts",
@@ -47,6 +47,7 @@
47
47
  "vite": "^7.1.9"
48
48
  },
49
49
  "dependencies": {
50
+ "consola": "^3.4.2",
50
51
  "hash-sum": "^2.0.0",
51
52
  "sucrase": "^3.35.0",
52
53
  "vue": "^3.5.22"