wip: is usage compat

diff --git a/packages/compiler-core/src/compat/compatConfig.ts b/packages/compiler-core/src/compat/compatConfig.ts
index 3abb77fabf13ee95231302ebd740eae174560fff..92e2c63db4af6fef223190af6b4258900309c90a 100644 (file)
--- a/packages/compiler-core/src/compat/compatConfig.ts
+++ b/packages/compiler-core/src/compat/compatConfig.ts
@@ -31,7 +31,10 @@ type DeprecationData = {
 
 const deprecationData: Record<CompilerDeprecationTypes, DeprecationData> = {
   [CompilerDeprecationTypes.IS_ON_ELEMENT]: {
-    message: ``,
+    message:
+      `Platform-native elements with "is" prop will no longer be ` +
+      `treated as components in Vue 3 unless the "is" value is explicitly ` +
+      `prefixed with "vue:".`,
     link: `https://v3.vuejs.org/guide/migration/custom-elements-interop.html`
   },
 

diff --git a/packages/compiler-core/src/parse.ts b/packages/compiler-core/src/parse.ts
index 73c25f01863359dd1ca651ee40beac226d0d1cc4..01bfa5e0537c0044ce7c8eac8b99ac99668198f8 100644 (file)
--- a/packages/compiler-core/src/parse.ts
+++ b/packages/compiler-core/src/parse.ts
@@ -30,7 +30,11 @@ import {
   createRoot,
   ConstantTypes
 } from './ast'
-import { CompilerCompatOptions } from './compat/compatConfig'
+import {
+  checkCompatEnabled,
+  CompilerCompatOptions,
+  CompilerDeprecationTypes
+} from './compat/compatConfig'
 
 type OptionalOptions =
   | 'isNativeTag'
@@ -499,14 +503,28 @@ function parseTag(
   let tagType = ElementTypes.ELEMENT
   const options = context.options
   if (!context.inVPre && !options.isCustomElement(tag)) {
-    const hasVIs = props.some(
-      p =>
-        p.name === 'is' &&
-        // v-is="xxx" (TODO: deprecate)
-        (p.type === NodeTypes.DIRECTIVE ||
-          // is="vue:xxx"
-          (p.value && p.value.content.startsWith('vue:')))
-    )
+    const hasVIs = props.some(p => {
+      if (p.name !== 'is') return
+      // v-is="xxx" (TODO: deprecate)
+      if (p.type === NodeTypes.DIRECTIVE) {
+        return true
+      }
+      // is="vue:xxx"
+      if (p.value && p.value.content.startsWith('vue:')) {
+        return true
+      }
+      // in compat mode, any is usage is considered a component
+      if (
+        __COMPAT__ &&
+        checkCompatEnabled(
+          CompilerDeprecationTypes.IS_ON_ELEMENT,
+          context,
+          p.loc
+        )
+      ) {
+        return true
+      }
+    })
     if (options.isNativeTag && !hasVIs) {
       if (!options.isNativeTag(tag)) tagType = ElementTypes.COMPONENT
     } else if (

diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index 334304adc1351795777bef88e370654398dc5cf9..cbb456a80a4f437ff257423240e19f1c70cffec0 100644 (file)
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -240,8 +240,11 @@ export function resolveComponentType(
     if (!isExplicitDynamic && isProp.type === NodeTypes.ATTRIBUTE) {
       // <button is="vue:xxx">
       // if not <component>, only is value that starts with "vue:" will be
-      // treated as component by the parse phase and reach here.
-      tag = isProp.value!.content.slice(4)
+      // treated as component by the parse phase and reach here, unless it's
+      // compat mode where all is values are considered components
+      tag = __COMPAT__
+        ? isProp.value!.content.replace(/^vue:/, '')
+        : isProp.value!.content.slice(4)
     } else {
       const exp =
         isProp.type === NodeTypes.ATTRIBUTE