@vue/compiler-sfc 3.4.26 → 3.5.0-alpha.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.
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @vue/compiler-sfc v3.4.26
2
+ * @vue/compiler-sfc v3.5.0-alpha.1
3
3
  * (c) 2018-present Yuxi (Evan) You and Vue contributors
4
4
  * @license MIT
5
5
  **/
@@ -19593,13 +19593,11 @@ function inferValueType(node) {
19593
19593
  }
19594
19594
 
19595
19595
  function processPropsDestructure(ctx, declId) {
19596
- if (!ctx.options.propsDestructure) {
19596
+ if (ctx.options.propsDestructure === "error") {
19597
+ ctx.error(`Props destructure is explicitly prohibited via config.`, declId);
19598
+ } else if (ctx.options.propsDestructure === false) {
19597
19599
  return;
19598
19600
  }
19599
- warnOnce(
19600
- `This project is using reactive props destructure, which is an experimental feature. It may receive breaking changes or be removed in the future, so use at your own risk.
19601
- To stay updated, follow the RFC at https://github.com/vuejs/rfcs/discussions/502.`
19602
- );
19603
19601
  ctx.propsDestructureDecl = declId;
19604
19602
  const registerBinding = (key, local, defaultValue) => {
19605
19603
  ctx.propsDestructuredBindings[key] = { local, default: defaultValue };
@@ -19641,7 +19639,7 @@ To stay updated, follow the RFC at https://github.com/vuejs/rfcs/discussions/502
19641
19639
  }
19642
19640
  }
19643
19641
  function transformDestructuredProps(ctx, vueImportAliases) {
19644
- if (!ctx.options.propsDestructure) {
19642
+ if (ctx.options.propsDestructure === false) {
19645
19643
  return;
19646
19644
  }
19647
19645
  const rootScope = {};
@@ -20763,7 +20761,7 @@ function isStaticNode(node) {
20763
20761
  return false;
20764
20762
  }
20765
20763
 
20766
- const version = "3.4.26";
20764
+ const version = "3.5.0-alpha.1";
20767
20765
  const parseCache = parseCache$1;
20768
20766
  const errorMessages = {
20769
20767
  ...CompilerDOM.errorMessages,
@@ -117,10 +117,11 @@ export interface SFCScriptCompileOptions {
117
117
  */
118
118
  hoistStatic?: boolean;
119
119
  /**
120
- * (**Experimental**) Enable reactive destructure for `defineProps`
121
- * @default false
120
+ * Set to `false` to disable reactive destructure for `defineProps` (pre-3.5
121
+ * behavior), or set to `'error'` to throw hard error on props destructures.
122
+ * @default true
122
123
  */
123
- propsDestructure?: boolean;
124
+ propsDestructure?: boolean | 'error';
124
125
  /**
125
126
  * File system access methods to be used when resolving types
126
127
  * imported in SFC macros. Defaults to ts.sys in Node.js, can be overwritten
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @vue/compiler-sfc v3.4.26
2
+ * @vue/compiler-sfc v3.5.0-alpha.1
3
3
  * (c) 2018-present Yuxi (Evan) You and Vue contributors
4
4
  * @license MIT
5
5
  **/
@@ -17247,10 +17247,11 @@ const tokenizer$2 = new Tokenizer$1(stack, {
17247
17247
  }
17248
17248
  },
17249
17249
  onselfclosingtag(end) {
17250
+ var _a;
17250
17251
  const name = currentOpenTag.tag;
17251
17252
  currentOpenTag.isSelfClosing = true;
17252
17253
  endOpenTag(end);
17253
- if (stack[0] && stack[0].tag === name) {
17254
+ if (((_a = stack[0]) == null ? void 0 : _a.tag) === name) {
17254
17255
  onCloseTag(stack.shift(), end);
17255
17256
  }
17256
17257
  },
@@ -17556,7 +17557,7 @@ function endOpenTag(end) {
17556
17557
  function onText(content, start, end) {
17557
17558
  const parent = stack[0] || currentRoot;
17558
17559
  const lastNode = parent.children[parent.children.length - 1];
17559
- if (lastNode && lastNode.type === 2) {
17560
+ if ((lastNode == null ? void 0 : lastNode.type) === 2) {
17560
17561
  lastNode.content += content;
17561
17562
  setLocEnd(lastNode.loc, end);
17562
17563
  } else {
@@ -17632,10 +17633,11 @@ function isFragmentTemplate({ tag, props }) {
17632
17633
  return false;
17633
17634
  }
17634
17635
  function isComponent({ tag, props }) {
17636
+ var _a;
17635
17637
  if (currentOptions.isCustomElement(tag)) {
17636
17638
  return false;
17637
17639
  }
17638
- if (tag === "component" || isUpperCase(tag.charCodeAt(0)) || isCoreComponent(tag) || currentOptions.isBuiltInComponent && currentOptions.isBuiltInComponent(tag) || currentOptions.isNativeTag && !currentOptions.isNativeTag(tag)) {
17640
+ if (tag === "component" || isUpperCase(tag.charCodeAt(0)) || isCoreComponent(tag) || ((_a = currentOptions.isBuiltInComponent) == null ? void 0 : _a.call(currentOptions, tag)) || currentOptions.isNativeTag && !currentOptions.isNativeTag(tag)) {
17639
17641
  return true;
17640
17642
  }
17641
17643
  for (let i = 0; i < props.length; i++) {
@@ -17655,6 +17657,7 @@ function isUpperCase(c) {
17655
17657
  }
17656
17658
  const windowsNewlineRE = /\r\n/g;
17657
17659
  function condenseWhitespace(nodes, tag) {
17660
+ var _a, _b;
17658
17661
  const shouldCondense = currentOptions.whitespace !== "preserve";
17659
17662
  let removedWhitespace = false;
17660
17663
  for (let i = 0; i < nodes.length; i++) {
@@ -17662,8 +17665,8 @@ function condenseWhitespace(nodes, tag) {
17662
17665
  if (node.type === 2) {
17663
17666
  if (!inPre) {
17664
17667
  if (isAllWhitespace(node.content)) {
17665
- const prev = nodes[i - 1] && nodes[i - 1].type;
17666
- const next = nodes[i + 1] && nodes[i + 1].type;
17668
+ const prev = (_a = nodes[i - 1]) == null ? void 0 : _a.type;
17669
+ const next = (_b = nodes[i + 1]) == null ? void 0 : _b.type;
17667
17670
  if (!prev || !next || shouldCondense && (prev === 3 && (next === 3 || next === 1) || prev === 1 && (next === 3 || next === 1 && hasNewlineChar(node.content)))) {
17668
17671
  removedWhitespace = true;
17669
17672
  nodes[i] = null;
@@ -17823,7 +17826,7 @@ function baseParse(input, options) {
17823
17826
  }
17824
17827
  tokenizer$2.mode = currentOptions.parseMode === "html" ? 1 : currentOptions.parseMode === "sfc" ? 2 : 0;
17825
17828
  tokenizer$2.inXML = currentOptions.ns === 1 || currentOptions.ns === 2;
17826
- const delimiters = options && options.delimiters;
17829
+ const delimiters = options == null ? void 0 : options.delimiters;
17827
17830
  if (delimiters) {
17828
17831
  tokenizer$2.delimiterOpen = toCharCodes(delimiters[0]);
17829
17832
  tokenizer$2.delimiterClose = toCharCodes(delimiters[1]);
@@ -22507,6 +22510,7 @@ function genReturnStatement({ returns }, context) {
22507
22510
  }
22508
22511
 
22509
22512
  const isLiteralWhitelisted = /* @__PURE__ */ makeMap("true,false,null,this");
22513
+ const constantBailRE = /\w\s*\(|\.[^\d]/;
22510
22514
  const transformExpression = (node, context) => {
22511
22515
  if (node.type === 5) {
22512
22516
  node.content = processExpression(
@@ -22601,6 +22605,7 @@ function processExpression(node, context, asParams = false, asRawStatements = fa
22601
22605
  return `_ctx.${raw}`;
22602
22606
  };
22603
22607
  const rawExp = node.content;
22608
+ const bailConstant = constantBailRE.test(rawExp);
22604
22609
  let ast = node.ast;
22605
22610
  if (ast === false) {
22606
22611
  return node;
@@ -22659,7 +22664,7 @@ function processExpression(node, context, asParams = false, asRawStatements = fa
22659
22664
  node2.name = rewriteIdentifier(node2.name, parent, node2);
22660
22665
  ids.push(node2);
22661
22666
  } else {
22662
- if (!(needPrefix && isLocal) && parent.type !== "CallExpression" && parent.type !== "NewExpression" && parent.type !== "MemberExpression") {
22667
+ if (!(needPrefix && isLocal) && !bailConstant) {
22663
22668
  node2.isConstant = true;
22664
22669
  }
22665
22670
  ids.push(node2);
@@ -22703,7 +22708,7 @@ function processExpression(node, context, asParams = false, asRawStatements = fa
22703
22708
  ret.ast = ast;
22704
22709
  } else {
22705
22710
  ret = node;
22706
- ret.constType = 3;
22711
+ ret.constType = bailConstant ? 0 : 3;
22707
22712
  }
22708
22713
  ret.identifiers = Object.keys(knownIds);
22709
22714
  return ret;
@@ -25259,9 +25264,183 @@ const ignoreSideEffectTags = (node, context) => {
25259
25264
  }
25260
25265
  };
25261
25266
 
25267
+ function isValidHTMLNesting(parent, child) {
25268
+ if (parent in onlyValidChildren) {
25269
+ return onlyValidChildren[parent].has(child);
25270
+ }
25271
+ if (child in onlyValidParents) {
25272
+ return onlyValidParents[child].has(parent);
25273
+ }
25274
+ if (parent in knownInvalidChildren) {
25275
+ if (knownInvalidChildren[parent].has(child))
25276
+ return false;
25277
+ }
25278
+ if (child in knownInvalidParents) {
25279
+ if (knownInvalidParents[child].has(parent))
25280
+ return false;
25281
+ }
25282
+ return true;
25283
+ }
25284
+ const headings = /* @__PURE__ */ new Set(["h1", "h2", "h3", "h4", "h5", "h6"]);
25285
+ const emptySet = /* @__PURE__ */ new Set([]);
25286
+ const onlyValidChildren = {
25287
+ head: /* @__PURE__ */ new Set([
25288
+ "base",
25289
+ "basefront",
25290
+ "bgsound",
25291
+ "link",
25292
+ "meta",
25293
+ "title",
25294
+ "noscript",
25295
+ "noframes",
25296
+ "style",
25297
+ "script",
25298
+ "template"
25299
+ ]),
25300
+ optgroup: /* @__PURE__ */ new Set(["option"]),
25301
+ select: /* @__PURE__ */ new Set(["optgroup", "option", "hr"]),
25302
+ // table
25303
+ table: /* @__PURE__ */ new Set(["caption", "colgroup", "tbody", "tfoot", "thead"]),
25304
+ tr: /* @__PURE__ */ new Set(["td", "th"]),
25305
+ colgroup: /* @__PURE__ */ new Set(["col"]),
25306
+ tbody: /* @__PURE__ */ new Set(["tr"]),
25307
+ thead: /* @__PURE__ */ new Set(["tr"]),
25308
+ tfoot: /* @__PURE__ */ new Set(["tr"]),
25309
+ // these elements can not have any children elements
25310
+ script: emptySet,
25311
+ iframe: emptySet,
25312
+ option: emptySet,
25313
+ textarea: emptySet,
25314
+ style: emptySet,
25315
+ title: emptySet
25316
+ };
25317
+ const onlyValidParents = {
25318
+ // sections
25319
+ html: emptySet,
25320
+ body: /* @__PURE__ */ new Set(["html"]),
25321
+ head: /* @__PURE__ */ new Set(["html"]),
25322
+ // table
25323
+ td: /* @__PURE__ */ new Set(["tr"]),
25324
+ colgroup: /* @__PURE__ */ new Set(["table"]),
25325
+ caption: /* @__PURE__ */ new Set(["table"]),
25326
+ tbody: /* @__PURE__ */ new Set(["table"]),
25327
+ tfoot: /* @__PURE__ */ new Set(["table"]),
25328
+ col: /* @__PURE__ */ new Set(["colgroup"]),
25329
+ th: /* @__PURE__ */ new Set(["tr"]),
25330
+ thead: /* @__PURE__ */ new Set(["table"]),
25331
+ tr: /* @__PURE__ */ new Set(["tbody", "thead", "tfoot"]),
25332
+ // data list
25333
+ dd: /* @__PURE__ */ new Set(["dl", "div"]),
25334
+ dt: /* @__PURE__ */ new Set(["dl", "div"]),
25335
+ // other
25336
+ figcaption: /* @__PURE__ */ new Set(["figure"]),
25337
+ // li: new Set(["ul", "ol"]),
25338
+ summary: /* @__PURE__ */ new Set(["details"]),
25339
+ area: /* @__PURE__ */ new Set(["map"])
25340
+ };
25341
+ const knownInvalidChildren = {
25342
+ p: /* @__PURE__ */ new Set([
25343
+ "address",
25344
+ "article",
25345
+ "aside",
25346
+ "blockquote",
25347
+ "center",
25348
+ "details",
25349
+ "dialog",
25350
+ "dir",
25351
+ "div",
25352
+ "dl",
25353
+ "fieldset",
25354
+ "figure",
25355
+ "footer",
25356
+ "form",
25357
+ "h1",
25358
+ "h2",
25359
+ "h3",
25360
+ "h4",
25361
+ "h5",
25362
+ "h6",
25363
+ "header",
25364
+ "hgroup",
25365
+ "hr",
25366
+ "li",
25367
+ "main",
25368
+ "nav",
25369
+ "menu",
25370
+ "ol",
25371
+ "p",
25372
+ "pre",
25373
+ "section",
25374
+ "table",
25375
+ "ul"
25376
+ ]),
25377
+ svg: /* @__PURE__ */ new Set([
25378
+ "b",
25379
+ "blockquote",
25380
+ "br",
25381
+ "code",
25382
+ "dd",
25383
+ "div",
25384
+ "dl",
25385
+ "dt",
25386
+ "em",
25387
+ "embed",
25388
+ "h1",
25389
+ "h2",
25390
+ "h3",
25391
+ "h4",
25392
+ "h5",
25393
+ "h6",
25394
+ "hr",
25395
+ "i",
25396
+ "img",
25397
+ "li",
25398
+ "menu",
25399
+ "meta",
25400
+ "ol",
25401
+ "p",
25402
+ "pre",
25403
+ "ruby",
25404
+ "s",
25405
+ "small",
25406
+ "span",
25407
+ "strong",
25408
+ "sub",
25409
+ "sup",
25410
+ "table",
25411
+ "u",
25412
+ "ul",
25413
+ "var"
25414
+ ])
25415
+ };
25416
+ const knownInvalidParents = {
25417
+ a: /* @__PURE__ */ new Set(["a"]),
25418
+ button: /* @__PURE__ */ new Set(["button"]),
25419
+ dd: /* @__PURE__ */ new Set(["dd", "dt"]),
25420
+ dt: /* @__PURE__ */ new Set(["dd", "dt"]),
25421
+ form: /* @__PURE__ */ new Set(["form"]),
25422
+ li: /* @__PURE__ */ new Set(["li"]),
25423
+ h1: headings,
25424
+ h2: headings,
25425
+ h3: headings,
25426
+ h4: headings,
25427
+ h5: headings,
25428
+ h6: headings
25429
+ };
25430
+
25431
+ const validateHtmlNesting = (node, context) => {
25432
+ if (node.type === 1 && node.tagType === 0 && context.parent && context.parent.type === 1 && context.parent.tagType === 0 && !isValidHTMLNesting(context.parent.tag, node.tag)) {
25433
+ const error = new SyntaxError(
25434
+ `<${node.tag}> cannot be child of <${context.parent.tag}>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.`
25435
+ );
25436
+ error.loc = node.loc;
25437
+ context.onWarn(error);
25438
+ }
25439
+ };
25440
+
25262
25441
  const DOMNodeTransforms = [
25263
25442
  transformStyle,
25264
- ...[transformTransition]
25443
+ ...[transformTransition, validateHtmlNesting]
25265
25444
  ];
25266
25445
  const DOMDirectiveTransforms = {
25267
25446
  cloak: noopDirectiveTransform,
@@ -47164,13 +47343,11 @@ function inferValueType(node) {
47164
47343
  }
47165
47344
 
47166
47345
  function processPropsDestructure(ctx, declId) {
47167
- if (!ctx.options.propsDestructure) {
47346
+ if (ctx.options.propsDestructure === "error") {
47347
+ ctx.error(`Props destructure is explicitly prohibited via config.`, declId);
47348
+ } else if (ctx.options.propsDestructure === false) {
47168
47349
  return;
47169
47350
  }
47170
- warnOnce$3(
47171
- `This project is using reactive props destructure, which is an experimental feature. It may receive breaking changes or be removed in the future, so use at your own risk.
47172
- To stay updated, follow the RFC at https://github.com/vuejs/rfcs/discussions/502.`
47173
- );
47174
47351
  ctx.propsDestructureDecl = declId;
47175
47352
  const registerBinding = (key, local, defaultValue) => {
47176
47353
  ctx.propsDestructuredBindings[key] = { local, default: defaultValue };
@@ -47212,7 +47389,7 @@ To stay updated, follow the RFC at https://github.com/vuejs/rfcs/discussions/502
47212
47389
  }
47213
47390
  }
47214
47391
  function transformDestructuredProps(ctx, vueImportAliases) {
47215
- if (!ctx.options.propsDestructure) {
47392
+ if (ctx.options.propsDestructure === false) {
47216
47393
  return;
47217
47394
  }
47218
47395
  const rootScope = {};
@@ -48364,7 +48541,7 @@ var __spreadValues = (a, b) => {
48364
48541
  }
48365
48542
  return a;
48366
48543
  };
48367
- const version = "3.4.26";
48544
+ const version = "3.5.0-alpha.1";
48368
48545
  const parseCache = parseCache$1;
48369
48546
  const errorMessages = __spreadValues(__spreadValues({}, errorMessages$1), DOMErrorMessages);
48370
48547
  const walk = walk$2;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vue/compiler-sfc",
3
- "version": "3.4.26",
3
+ "version": "3.5.0-alpha.1",
4
4
  "description": "@vue/compiler-sfc",
5
5
  "main": "dist/compiler-sfc.cjs.js",
6
6
  "module": "dist/compiler-sfc.esm-browser.js",
@@ -47,10 +47,10 @@
47
47
  "magic-string": "^0.30.10",
48
48
  "postcss": "^8.4.38",
49
49
  "source-map-js": "^1.2.0",
50
- "@vue/compiler-core": "3.4.26",
51
- "@vue/shared": "3.4.26",
52
- "@vue/compiler-dom": "3.4.26",
53
- "@vue/compiler-ssr": "3.4.26"
50
+ "@vue/compiler-dom": "3.5.0-alpha.1",
51
+ "@vue/compiler-core": "3.5.0-alpha.1",
52
+ "@vue/shared": "3.5.0-alpha.1",
53
+ "@vue/compiler-ssr": "3.5.0-alpha.1"
54
54
  },
55
55
  "devDependencies": {
56
56
  "@babel/types": "^7.24.0",