feat(@Mixin): new decorator

package.json

@@ -83,6 +83,7 @@
     "@types/ws": "^7.4.0",
     "@types/yarnpkg__lockfile": "^1.1.5",
     "@yarnpkg/lockfile": "^1.1.0",
+    "ts-clone-node": "^0.3.24",
     "ansi-colors": "4.1.1",
     "autoprefixer": "10.2.5",
     "concurrently": "^6.0.0",

src/compiler/build/compiler-ctx.ts

@@ -103,6 +103,7 @@ export const getModuleLegacy = (_config: d.Config, compilerCtx: d.CompilerCtx, s
       potentialCmpRefs: [],
       staticSourceFile: null,
       staticSourceFileText: '',
+      mixinFilePaths: [],
       sourceMapPath: null,
       sourceMapFileText: null,
     };

src/compiler/sys/typescript/typescript-sys.ts

@@ -162,10 +162,10 @@ const patchTsSystemWatch = (stencilSys: d.CompilerSystem, tsSys: ts.System) => {
 export const patchTypescript = (config: d.Config, inMemoryFs: d.InMemoryFileSystem) => {
   if (!(ts as any).__patched) {
     if (config.sys) {
-      patchTsSystemFileSystem(config, config.sys, inMemoryFs, ts.sys);
+      if (inMemoryFs) patchTsSystemFileSystem(config, config.sys, inMemoryFs, ts.sys);
       patchTsSystemWatch(config.sys, ts.sys);
     }
-    patchTypeScriptResolveModule(config, inMemoryFs);
+    if (inMemoryFs) patchTypeScriptResolveModule(config, inMemoryFs);
     patchTypeScriptGetParsedCommandLineOfConfigFile();
     (ts as any).__patched = true;
   }

src/compiler/transformers/decorators-to-static/component-decorator.ts

@@ -1,6 +1,6 @@
 import type * as d from '../../../declarations';
 import { augmentDiagnosticWithNode, buildError, validateComponentTag, isString, buildWarn } from '@utils';
-import { getDeclarationParameters } from './decorator-utils';
+import { getDeclarationParameters, isDecoratorNamed } from './decorator-utils';
 import { convertValueToLiteral, createStaticGetter } from '../transform-utils';
 import { styleToStatic } from './style-to-static';
 import ts from 'typescript';
@@ -87,12 +87,14 @@ const validateComponent = (
   }
 
   // check if class has more than one decorator
-  const otherDecorator = cmpNode.decorators && cmpNode.decorators.find((d) => d !== componentDecorator);
-  if (otherDecorator) {
+  const mixinDecs = cmpNode.decorators && cmpNode.decorators.filter(isDecoratorNamed('Mixin'));
+  const otherDecorator =
+    cmpNode.decorators && cmpNode.decorators.filter((d) => d !== componentDecorator && !mixinDecs.includes(d));
+  if (otherDecorator.length) {
     const err = buildError(diagnostics);
     err.messageText = `Classes decorated with @Component can not be decorated with more decorators.
     Stencil performs extensive static analysis on top of your components in order to generate the necessary metadata, runtime decorators at the components level make this task very hard.`;
-    augmentDiagnosticWithNode(err, otherDecorator);
+    augmentDiagnosticWithNode(err, otherDecorator[0]);
     return false;
   }
 

src/compiler/transformers/decorators-to-static/convert-decorators.ts

@@ -1,20 +1,26 @@
 import type * as d from '../../../declarations';
 import { CLASS_DECORATORS_TO_REMOVE, MEMBER_DECORATORS_TO_REMOVE } from './decorators-constants';
+import { mixinClassMembers, hasMixins, mixinStatements, VisitedFiles, FoundMixins } from './mixin-decorator';
 import { componentDecoratorToStatic } from './component-decorator';
 import { elementDecoratorsToStatic } from './element-decorator';
 import { eventDecoratorsToStatic } from './event-decorator';
 import { listenDecoratorsToStatic } from './listen-decorator';
 import { isDecoratorNamed } from './decorator-utils';
+import { cloneNode } from '../transform-utils';
 import { methodDecoratorsToStatic, validateMethods } from './method-decorator';
 import { propDecoratorsToStatic } from './prop-decorator';
 import { stateDecoratorsToStatic } from './state-decorator';
 import { watchDecoratorsToStatic } from './watch-decorator';
 import ts from 'typescript';
 
+const visitedFiles: VisitedFiles = new Map();
+const allMixins: FoundMixins = new Map();
+
 export const convertDecoratorsToStatic = (
   config: d.Config,
   diagnostics: d.Diagnostic[],
-  typeChecker: ts.TypeChecker
+  typeChecker: ts.TypeChecker,
+  compilerHost?: ts.CompilerHost
 ): ts.TransformerFactory<ts.SourceFile> => {
   return (transformCtx) => {
     const visit = (node: ts.Node): ts.VisitResult<ts.Node> => {
@@ -25,11 +31,29 @@ export const convertDecoratorsToStatic = (
     };
 
     return (tsSourceFile) => {
-      return ts.visitEachChild(tsSourceFile, visit, transformCtx);
+      const sourceFile = visitSourceFile(tsSourceFile, diagnostics, compilerHost);
+      return ts.visitEachChild(sourceFile, visit, transformCtx);
     };
   };
 };
 
+export const visitSourceFile = (
+  sourceNode: ts.SourceFile,
+  diagnostics: d.Diagnostic[],
+  compilerHost?: ts.CompilerHost
+) => {
+  visitedFiles.set(sourceNode.fileName, sourceNode);
+  const mixinsFound = hasMixins(sourceNode, diagnostics, visitedFiles, compilerHost);
+  if (!mixinsFound) {
+    return sourceNode;
+  }
+
+  const statements = mixinStatements(sourceNode, mixinsFound, diagnostics);
+  allMixins.set(sourceNode.fileName, mixinsFound);
+
+  return ts.factory.updateSourceFile(sourceNode, statements);
+};
+
 export const visitClassDeclaration = (
   config: d.Config,
   diagnostics: d.Diagnostic[],
@@ -45,7 +69,9 @@ export const visitClassDeclaration = (
     return classNode;
   }
 
-  const classMembers = classNode.members;
+  const didReplace = mixinClassMembers(classNode, allMixins);
+  const classMembers = !!didReplace ? didReplace : classNode.members;
+
   const decoratedMembers = classMembers.filter(
     (member) => Array.isArray(member.decorators) && member.decorators.length > 0
   );
@@ -69,14 +95,14 @@ export const visitClassDeclaration = (
 
   validateMethods(diagnostics, classMembers);
 
-  return ts.updateClassDeclaration(
+  return ts.factory.updateClassDeclaration(
     classNode,
     removeDecorators(classNode, CLASS_DECORATORS_TO_REMOVE),
     classNode.modifiers,
     classNode.name,
     classNode.typeParameters,
     classNode.heritageClauses,
-    newMembers
+    didReplace ? newMembers.map((member) => cloneNode(member)) : newMembers
   );
 };
 

src/compiler/transformers/decorators-to-static/decorator-utils.ts

@@ -18,9 +18,9 @@ const getDeclarationParameter = (arg: ts.Expression): any => {
   throw new Error(`invalid decorator argument: ${arg.getText()}`);
 };
 
-export const isDecoratorNamed = (propName: string) => {
+export const isDecoratorNamed = (propName: string, sourceFile?: ts.SourceFile) => {
   return (dec: ts.Decorator): boolean => {
-    return ts.isCallExpression(dec.expression) && dec.expression.expression.getText() === propName;
+    return ts.isCallExpression(dec.expression) && dec.expression.expression.getText(sourceFile) === propName;
   };
 };
 

src/compiler/transformers/decorators-to-static/decorators-constants.ts

@@ -1,4 +1,4 @@
-export const CLASS_DECORATORS_TO_REMOVE = new Set(['Component']);
+export const CLASS_DECORATORS_TO_REMOVE = new Set(['Component', 'Mixin']);
 
 export const MEMBER_DECORATORS_TO_REMOVE = new Set([
   'Element',