feat(apiApp): add more warnings (#394)

packages/runtime-core/__tests__/apiApp.spec.ts

@@ -81,6 +81,11 @@ describe('api: createApp', () => {
 
     app.component('BarBaz', () => 'barbaz!')
 
+    app.component('BarBaz', () => 'barbaz!')
+    expect(
+      'Component "BarBaz" has already been registered in target app.'
+    ).toHaveBeenWarnedTimes(1)
+
     const Root = {
       // local override
       components: {
@@ -117,6 +122,13 @@ describe('api: createApp', () => {
       mounted: spy2
     })
 
+    app.directive('BarBaz', {
+      mounted: spy2
+    })
+    expect(
+      'Directive "BarBaz" has already been registered in target app.'
+    ).toHaveBeenWarnedTimes(1)
+
     const Root = {
       // local override
       directives: {
@@ -164,6 +176,7 @@ describe('api: createApp', () => {
       }
     }
     const mixinB = {
+      name: 'mixinB',
       data() {
         return {
           b: 2
@@ -203,6 +216,15 @@ describe('api: createApp', () => {
     app.mixin(mixinA)
     app.mixin(mixinB)
 
+    app.mixin(mixinA)
+    app.mixin(mixinB)
+    expect(
+      'Mixin has already been applied to target app'
+    ).toHaveBeenWarnedTimes(2)
+    expect(
+      'Mixin has already been applied to target app: mixinB'
+    ).toHaveBeenWarnedTimes(1)
+
     const root = nodeOps.createElement('div')
     app.mount(Comp, root)
 

packages/runtime-core/src/apiApp.ts

@@ -110,7 +110,19 @@ export function createAppAPI<HostNode, HostElement>(
       },
 
       mixin(mixin: ComponentOptions) {
-        context.mixins.push(mixin)
+        if (__DEV__ && !__FEATURE_OPTIONS__) {
+          warn('Mixins are only available in builds supporting Options API')
+        }
+
+        if (!context.mixins.includes(mixin)) {
+          context.mixins.push(mixin)
+        } else if (__DEV__) {
+          warn(
+            'Mixin has already been applied to target app' +
+              (mixin.name ? `: ${mixin.name}` : '')
+          )
+        }
+
         return app
       },
 
@@ -121,6 +133,11 @@ export function createAppAPI<HostNode, HostElement>(
         if (!component) {
           return context.components[name]
         } else {
+          if (__DEV__ && context.components[name]) {
+            warn(
+              `Component "${name}" has already been registered in target app.`
+            )
+          }
           context.components[name] = component
           return app
         }
@@ -134,6 +151,11 @@ export function createAppAPI<HostNode, HostElement>(
         if (!directive) {
           return context.directives[name] as any
         } else {
+          if (__DEV__ && context.directives[name]) {
+            warn(
+              `Directive "${name}" has already been registered in target app.`
+            )
+          }
           context.directives[name] = directive
           return app
         }