@vuebro/loader-sfc 2.2.4 → 2.3.1

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 +5912 -5734
  3. package/dist/loader-sfc.js +86 -39
  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
- if (modules) {
52
- moduleWarning =
53
- "<style module> is not supported in the playground.";
56
+ if (modules && !styleWarning) {
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,21 @@ export default async (filename, { parseOptions, scriptOptions: { templateOptions
81
118
  ...templateOptions,
82
119
  })
83
120
  : {};
121
+ /* -------------------------------------------------------------------------- */
122
+ /* Вывод ошибок, предупреждений и подсказок */
123
+ /* -------------------------------------------------------------------------- */
124
+ [...parseErrors, ...(templateErrors ?? []), ...styleErrors].forEach((error) => {
125
+ consola.error(error);
126
+ });
127
+ [...(scriptWarnings ?? []), ...(styleWarning ? [styleWarning] : [])].forEach((warn) => {
128
+ consola.warn(warn);
129
+ });
130
+ [...(templateTips ?? [])].forEach((info) => {
131
+ consola.info(info);
132
+ });
133
+ /* -------------------------------------------------------------------------- */
134
+ /* Получение и обработка результатов */
135
+ /* -------------------------------------------------------------------------- */
84
136
  const [styleResult, scriptResult, templateResult] = await Promise.all([
85
137
  style,
86
138
  content
@@ -89,24 +141,19 @@ export default async (filename, { parseOptions, scriptOptions: { templateOptions
89
141
  code
90
142
  ? inject(langs.size ? transform(code, sucraseOptions).code : code)
91
143
  : Promise.resolve(undefined),
92
- ]), textContent = styleResult.join("\n").trim();
144
+ ]);
145
+ /* -------------------------------------------------------------------------- */
146
+ /* Внедрение стилей в документ */
147
+ /* -------------------------------------------------------------------------- */
148
+ const textContent = styleResult.join("\n").trim();
93
149
  if (textContent) {
94
150
  const el = document.createElement("style");
95
151
  el.id = id;
96
152
  el.textContent = textContent;
97
153
  document.head.appendChild(el);
98
154
  }
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;
155
+ /* -------------------------------------------------------------------------- */
156
+ /* Формирование возвращаемого компонента */
157
+ /* -------------------------------------------------------------------------- */
158
+ return { __scopeId: id, ...scriptResult?.default, ...templateResult };
112
159
  };
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.1",
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"