@ui5/webcomponents-tools 2.15.0 → 2.16.0-rc.1

package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/reexported-wrapped-mixin-exports.js

@@ -0,0 +1,84 @@
+import { isMixin } from '../../utils/mixins.js';
+import { has } from '../../utils/index.js';
+import { createClassDeclarationMixin } from './creators/handlers.js';
+
+/**
+ * REEXPORTED WRAPPED MIXIN EXPORTS
+ * 
+ * Handle exported mixins
+ * @example ```
+ * 
+ * function FooMixinImpl(klass) {
+ *   class FooMixin extends klass {}
+ *   return FooMixin;
+ * }
+ * 
+ * export const FooMixin = dedupeMixin(FooMixinImpl);
+ * 
+ * ```
+ */
+export function reexportedWrappedMixinExportsPlugin() {
+  return {
+    name: 'CORE - REEXPORTED-WRAPPED-MIXINS',
+    analyzePhase({ts, node, moduleDoc, context}){
+      switch(node.kind) {
+        case ts.SyntaxKind.VariableStatement:
+          if(!isMixin(node)) {
+            node?.declarationList?.declarations?.forEach(declaration => {
+
+              const mixins = [];
+              if(ts.SyntaxKind.CallExpression === declaration?.initializer?.kind) {
+                /**
+                 * If an exported variable has a callExpression, it might try to export a mixin
+                 * We need to check if the current module contains any mixins
+                 */
+                const moduleMixinDeclarations = moduleDoc?.declarations?.filter(declaration => declaration.kind === 'mixin');
+
+                if(has(moduleMixinDeclarations)){
+                  const mixinName = declaration?.initializer?.expression?.getText();
+                  mixins.push(mixinName);
+
+                  let node = declaration?.initializer?.arguments[0];
+                  
+                  /** 
+                   * Handle nested Mixin calls 
+                   */
+                  while(node && ts.isCallExpression(node)) {
+                    const mixinName = node.expression.getText();
+                    mixins.push(mixinName);
+  
+                    node = node?.arguments[0]
+                  }
+
+                  /**
+                   * See if we can find the supposed Mixin in the modules declaration
+                   * If we do, change the name of MixinImpl to the variableDeclaration thats actually being exported
+                   */
+                  const foundMixin = moduleMixinDeclarations?.find(mixin => mixin.name === node?.getText());
+                  if(foundMixin) {
+                    foundMixin.name = declaration?.name?.getText()
+      
+                    /**
+                     * Next, we need to add any other mixins found along the way to the exported mixin's `mixins` array
+                     */
+                    mixins?.forEach(mixin => {
+                      const newMixin = createClassDeclarationMixin(mixin, moduleDoc, context);
+                      foundMixin.mixins = [...(foundMixin?.mixins || []), newMixin];
+                    });
+
+                    /**
+                     * At this point, there's now a variable declaration and a mixin declaration with the same name.
+                     * We're only interested in the mixin, so we filter out the variable declaration
+                     */
+                    moduleDoc.declarations = moduleDoc?.declarations?.filter(declaration => !(declaration.kind === 'variable' && declaration.name === foundMixin.name));
+                  }
+
+                }
+              }
+            });
+          }
+          break;
+      }
+    }
+  }
+}

package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/analyse-phase/variables.js

@@ -0,0 +1,34 @@
+import { createVariable } from './creators/createVariable.js';
+import { isMixin } from '../../utils/mixins.js';
+
+/**
+ * variablePlugin
+ * 
+ * handles variables
+ */
+export function variablePlugin() {
+  return {
+    name: 'CORE - VARIABLES',
+    analyzePhase({ts, node, moduleDoc}){
+      switch(node.kind) {
+        case ts.SyntaxKind.VariableStatement:
+          if(!isMixin(node)) {
+            node?.declarationList?.declarations?.forEach(declaration => {
+              /**
+               * It can be the case that a variable is already present in the declarations,
+               * for example if the variable is also an arrow function. So we need to make sure
+               * the declaration doesnt already exist before adding it to a modules declarations
+               */
+              const alreadyExists = moduleDoc?.declarations?.some(_declaration => _declaration.name === declaration?.name?.getText());
+
+              if(!alreadyExists) {
+                const variable = createVariable(node, declaration);
+                moduleDoc.declarations.push(variable);
+              }
+            });
+          }
+          break;
+      }
+    }
+  }
+}

package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/collect-phase/collect-imports.js

@@ -0,0 +1,101 @@
+import {
+  hasDefaultImport,
+  hasNamedImport,
+  hasAggregatingImport,
+  hasSideEffectImport,
+} from '../../utils/imports.js';
+import { isBareModuleSpecifier } from '../../utils/index.js';
+
+/**
+ * COLLECT-IMPORTS
+ * 
+ * Collects a modules imports so that declarations can later be resolved to their module/package.
+ */
+export function collectImportsPlugin() {
+  const files = {};
+  let currModuleImports;
+
+  return {
+    name: 'CORE - IMPORTS',
+    collectPhase({ts, node}) {
+      if(node.kind === ts.SyntaxKind.SourceFile) {
+        /**
+         * Create an empty array for each module we visit
+         */
+        files[node.fileName] = [];
+        currModuleImports = files[node.fileName];
+      }
+
+      /** 
+       * @example import defaultExport from 'foo'; 
+       */
+      if (hasDefaultImport(node)) {
+        const importTemplate = {
+          name: node.importClause.name.text,
+          kind: 'default',
+          importPath: node.moduleSpecifier.text,
+          isBareModuleSpecifier: isBareModuleSpecifier(node.moduleSpecifier.text),
+          isTypeOnly: !!node?.importClause?.isTypeOnly
+        };
+        currModuleImports.push(importTemplate);
+      }
+
+      /**
+       * @example import { export1, export2 } from 'foo';
+       * @example import { export1 as alias1 } from 'foo';
+       * @example import { export1, export2 as alias2 } from 'foo';
+       */
+      if (hasNamedImport(node)) {
+        node.importClause.namedBindings.elements.forEach((element) => {
+          const importTemplate = {
+            name: element.name.text,
+            kind: 'named',
+            importPath: node.moduleSpecifier.text,
+            isBareModuleSpecifier: isBareModuleSpecifier(node.moduleSpecifier.text),
+            isTypeOnly: !!node?.importClause?.isTypeOnly
+          };
+          currModuleImports.push(importTemplate);
+        });
+      }
+
+      /**
+       * @example import * as name from './my-module.js'; 
+       */
+      if (hasAggregatingImport(node)) {
+        const importTemplate = {
+          name: node.importClause.namedBindings.name.text,
+          kind: 'aggregate',
+          importPath: node.moduleSpecifier.text,
+          isBareModuleSpecifier: isBareModuleSpecifier(node.moduleSpecifier.text),
+          isTypeOnly: !!node?.importClause?.isTypeOnly
+        };
+        currModuleImports.push(importTemplate);
+      }
+
+      /**
+       * @example import './my-module.js';
+       */
+      if(hasSideEffectImport(node)) {
+        const importTemplate = {
+          kind: 'side-effect',
+          importPath: node.moduleSpecifier.text,
+          isBareModuleSpecifier: isBareModuleSpecifier(node.moduleSpecifier.text),
+          isTypeOnly: false
+        };
+        currModuleImports.push(importTemplate);
+      }
+    },
+    analyzePhase({ts, node, context}) {
+      if(node.kind === ts.SyntaxKind.SourceFile) {
+        
+        /** Makes the imports available on the context object for a given module */
+        context.imports = files[node.fileName];
+      }
+    },
+    packageLinkPhase({context}) {
+      /** Reset */
+      context.imports = [];
+    }
+  }
+}
+

package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/catalyst/catalyst.js

@@ -0,0 +1,11 @@
+import { dasherize } from '@github/catalyst/lib/dasherize.js';
+import { attrDecoratorPlugin } from '../decorators/attr.js';
+import { controllerPlugin } from './controller.js';
+
+export const catalystPlugin = () => [
+  attrDecoratorPlugin(attr => {
+    attr.name = `data-${dasherize(attr.name)}`;
+    return attr;
+  }),
+  controllerPlugin()
+]

package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/catalyst/controller.js

@@ -0,0 +1,34 @@
+import { toKebabCase, resolveModuleOrPackageSpecifier, decorator } from '../../../utils/index.js'
+
+export function controllerPlugin() {
+  return {
+    name: 'CORE - CONTROLLER',
+    analyzePhase({ts, node, moduleDoc, context}){
+      switch(node.kind) {
+        case ts.SyntaxKind.ClassDeclaration:
+          /**
+           * handle @controller
+           */
+          const hasController = node?.modifiers?.find(decorator('controller'));
+
+          if(hasController) {
+            const className = node?.name?.getText();
+            
+            const definitionDoc = {
+              kind: 'custom-element-definition',
+              name: toKebabCase(className).replace('-element', ''),
+              declaration: {
+                name: className,
+                ...resolveModuleOrPackageSpecifier(moduleDoc, context, className)
+              },
+            };
+
+
+            moduleDoc.exports.push(definitionDoc);
+          }
+          break;
+      }
+    },
+  }
+}
+

package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/catalyst-major-2/catalyst.js

@@ -0,0 +1,11 @@
+import { dasherize } from '@github/catalyst/lib/dasherize.js';
+import { attrDecoratorPlugin } from '../decorators/attr.js';
+import { controllerPlugin } from './controller.js';
+
+export const catalystPlugin2 = () => [
+  attrDecoratorPlugin(attr => {
+    attr.name = dasherize(attr.name);
+    return attr;
+  }),
+  controllerPlugin()
+]

package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/catalyst-major-2/controller.js

@@ -0,0 +1,34 @@
+import { toKebabCase, resolveModuleOrPackageSpecifier, decorator } from '../../../utils/index.js'
+
+export function controllerPlugin() {
+  return {
+    name: 'CORE - CONTROLLER',
+    analyzePhase({ts, node, moduleDoc, context}){
+      switch(node.kind) {
+        case ts.SyntaxKind.ClassDeclaration:
+          /**
+           * handle @controller
+           */
+          const hasController = node?.modifiers?.find(decorator('controller'));
+
+          if(hasController) {
+            const className = node?.name?.getText();
+            
+            const definitionDoc = {
+              kind: 'custom-element-definition',
+              name: toKebabCase(className).replace('-element', ''),
+              declaration: {
+                name: className,
+                ...resolveModuleOrPackageSpecifier(moduleDoc, context, className)
+              },
+            };
+
+
+            moduleDoc.exports.push(definitionDoc);
+          }
+          break;
+      }
+    },
+  }
+}
+

package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/decorators/attr.js

@@ -0,0 +1,53 @@
+import { decorator } from '../../../utils/index.js'
+import { getOptionsObject } from '../../../utils/ast-helpers.js'
+import { createAttributeFromField } from '../../analyse-phase/creators/createAttribute.js';
+
+export function attrDecoratorPlugin(converter) {
+  return {
+    name: 'CORE - ATTR-DECORATOR',
+    analyzePhase({ts, node, moduleDoc}){
+      switch(node.kind) {
+        case ts.SyntaxKind.ClassDeclaration:
+          const className = node?.name?.getText();
+          const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);
+
+          /**
+           * If a field has the @attr decorator, create an attr from the field in the classDoc
+           */
+          node?.members?.forEach(member => {
+            const hasAttrDecorator = member?.modifiers?.find(decorator('attr'));
+            if(hasAttrDecorator) {
+              const correspondingField = classDoc?.members?.find(classMember => classMember.name === member.name.getText());
+
+              /**
+               * If a `field` was not found on the `currClass`, that's because it has a @internal jsdoc notation
+               */
+              if(!correspondingField) {
+                return;
+              }
+
+              let attribute = createAttributeFromField(correspondingField);
+
+              /**
+               * An @attr might have an options object, like: @attr({attribute: 'my-el'})
+               * to specify the attribute name, here we check if it does have such an object
+               * and add the name to the attribute
+               */
+              const optionsObject = getOptionsObject(hasAttrDecorator);
+              if(optionsObject) {
+                const name = optionsObject?.properties?.find(prop => prop.name.getText() === 'attribute')?.initializer?.text;
+                attribute.name = name;
+              }
+
+              if (converter) {
+                attribute = converter(attribute);
+              }
+
+              classDoc.attributes = [...(classDoc.attributes || []), attribute];
+            }
+          });
+          break;
+      }
+    },
+  }
+}

package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/decorators/custom-element-decorator.js

@@ -0,0 +1,36 @@
+import { getElementNameFromDecorator } from '../../../utils/ast-helpers.js';
+import { has, decorator, resolveModuleOrPackageSpecifier } from '../../../utils/index.js';
+
+/**
+ * CUSTOMELEMENT
+ * 
+ * Handles the customElement decorator
+ * @example @customElement('my-el');
+ */
+export function customElementDecoratorPlugin() {
+  return {
+    name: 'CORE - CUSTOM-ELEMENT-DECORATOR',
+    analyzePhase({node, moduleDoc, context}){
+      if (has(node.modifiers)) {
+        const customElementDecorator = node.modifiers?.find(decorator('customElement'));
+
+        if(customElementDecorator) {
+          const className = node.name.text;
+          const tagName = getElementNameFromDecorator(customElementDecorator);
+
+          const definitionDoc = {
+            kind: 'custom-element-definition',
+            name: tagName,
+            declaration: {
+              name: className,
+              ...resolveModuleOrPackageSpecifier(moduleDoc, context, className)
+            },
+          };
+
+          moduleDoc.exports = [...(moduleDoc.exports || []), definitionDoc];
+        }
+      }
+    }
+  }
+}
+

package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/fast/fast.js

@@ -0,0 +1,7 @@
+import { attrDecoratorPlugin } from '../decorators/attr.js';
+import { customElementDecoratorPlugin } from '../decorators/custom-element-decorator.js';
+
+export const fastPlugin = () => [
+  attrDecoratorPlugin(),
+  customElementDecoratorPlugin()
+]

package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/lit/lit.js

@@ -0,0 +1,13 @@
+import { customElementDecoratorPlugin } from '../decorators/custom-element-decorator.js';
+import { methodDenyListPlugin } from './method-denylist.js';
+import { memberDenyListPlugin } from './member-denylist.js';
+import { propertyDecoratorPlugin } from './property-decorator.js';
+import { staticPropertiesPlugin } from './static-properties.js';
+
+export const litPlugin = () => [
+  customElementDecoratorPlugin(),
+  methodDenyListPlugin(),
+  memberDenyListPlugin(),
+  propertyDecoratorPlugin(),
+  staticPropertiesPlugin()
+]

package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/lit/member-denylist.js

@@ -0,0 +1,21 @@
+/**
+ * MEMBER-DENY-LIST
+ * 
+ * Excludes members from the manifest
+ */
+export function memberDenyListPlugin() {
+  const MEMBER_DENY_LIST = ['properties', 'styles'];
+
+  return {
+    name: 'CORE - LIT-MEMBER-DENYLIST',
+    moduleLinkPhase({moduleDoc}){
+      const classes = moduleDoc?.declarations?.filter(declaration => declaration.kind === 'class');
+
+      classes?.forEach(klass => {
+        if(!klass?.members) return;
+        klass.members = klass?.members?.filter(member => !MEMBER_DENY_LIST.includes(member.name));
+      });
+    },
+  }
+}
+

package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/lit/method-denylist.js

@@ -0,0 +1,20 @@
+/**
+ * METHOD-DENY-LIST
+ * 
+ * Excludes methods from the manifest
+ */
+export function methodDenyListPlugin() {
+  const METHOD_DENY_LIST = ['requestUpdate', 'createRenderRoot', 'scheduleUpdate', 'performUpdate', 'shouldUpdate', 'update', 'render', 'firstUpdated', 'updated', 'willUpdate'];
+
+  return {
+    name: 'CORE - LIT-METHOD-DENYLIST',
+    moduleLinkPhase({moduleDoc}){
+      const classesAndMixins = moduleDoc?.declarations?.filter(declaration => declaration.kind === 'class' || declaration.kind === 'mixin');
+
+      classesAndMixins?.forEach(klass => {
+        if(!klass?.members) return;
+        klass.members = klass?.members?.filter(member => !METHOD_DENY_LIST.includes(member.name));
+      });
+    },
+  }
+}

package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/framework-plugins/lit/property-decorator.js

@@ -0,0 +1,94 @@
+import ts from 'typescript';
+import { decorator } from '../../../utils/index.js';
+import { createAttributeFromField } from '../../analyse-phase/creators/createAttribute.js';
+import { hasPropertyDecorator, isAlsoAttribute, getAttributeName, reflects } from './utils.js';
+
+import { extractMixinNodes, isMixin } from '../../../utils/mixins.js';
+import { handleName } from '../../analyse-phase/creators/createMixin.js';
+
+/**
+ * PROPERTY
+ * 
+ * Handles the property decorator
+ * @example @property({});
+ */
+export function propertyDecoratorPlugin() {
+  return {
+    name: 'CORE - LIT-PROPERTY-DECORATOR',
+    analyzePhase({ts, node, moduleDoc}){
+      switch (node.kind) {
+        case ts.SyntaxKind.VariableStatement:
+        case ts.SyntaxKind.FunctionDeclaration:
+          if(isMixin(node)) {
+            const { mixinFunction, mixinClass } = extractMixinNodes(node);
+            const { name } = handleName({}, mixinFunction);
+            handlePropertyDecorator(mixinClass, moduleDoc, name);
+          }
+          break;
+
+        case ts.SyntaxKind.ClassDeclaration:    
+          handlePropertyDecorator(node, moduleDoc);
+          break;
+        }
+      }
+  }
+}
+
+
+function handlePropertyDecorator(classNode, moduleDoc, mixinName = null) {
+  let className;
+  if(!mixinName) {
+    className = classNode?.name?.getText();
+  } else {
+    className = mixinName;
+  }
+
+  const currClass = moduleDoc?.declarations?.find(declaration => declaration.name === className);
+  /**
+   * Find members with @property decorator
+   */
+  classNode?.members?.forEach(member => {
+    if (hasPropertyDecorator(member)) {
+      const propertyDecorator = member.modifiers.find(decorator('property'));
+      const propertyOptions = propertyDecorator?.expression?.arguments?.find(arg => ts.isObjectLiteralExpression(arg));
+
+      /**
+       * If property does _not_ have `attribute: false`, also create an attribute based on the field
+       */
+      if (isAlsoAttribute(propertyOptions)) {
+        const field = currClass.members.find(classMember => classMember.name === member.name.getText());
+        /** If a `field` was not found on the `currClass`, that's because it has a @internal jsdoc notation */
+        if(!field) {
+          return;
+        }
+        const attribute = createAttributeFromField(field);
+
+        /**
+         * If an attribute name is provided
+         * @example @property({attribute:'my-foo'})
+         */
+        const attributeName = getAttributeName(propertyOptions);
+        if(attributeName) {
+          attribute.name = attributeName;
+          field.attribute = attributeName;
+        } else {
+          field.attribute = field.name;
+        }
+
+        
+        if(reflects(propertyOptions)) {
+          field.attribute = attribute.name;
+          field.reflects = true;
+        }
+
+        const existingAttribute = currClass?.attributes?.find(attr => attr.name === attribute.name);
+
+        if(!existingAttribute) {
+          currClass.attributes.push(attribute);
+        } else {
+          currClass.attributes = currClass?.attributes?.map(attr => attr.name === attribute.name ? ({...attr, ...attribute}) : attr);
+        }
+      }
+    }
+  });
+}