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

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

@@ -0,0 +1,121 @@
+import { createAttributeFromField } from '../../analyse-phase/creators/createAttribute.js';
+import { getDefaultValuesFromConstructorVisitor } from '../../analyse-phase/creators/createClass.js';
+import { handleJsDoc } from '../../analyse-phase/creators/handlers.js';
+import {
+  isAlsoAttribute,
+  hasStaticKeyword,
+  getPropertiesObject,
+  getAttributeName,
+  reflects,
+  getType,
+} from './utils.js';
+
+import { extractMixinNodes, isMixin } from '../../../utils/mixins.js';
+import { handleName } from '../../analyse-phase/creators/createMixin.js';
+
+/**
+ * STATIC-PROPERTIES
+ *
+ * Handles `static get properties()` and `static properties`
+ */
+export function staticPropertiesPlugin() {
+  return {
+    name: 'CORE - LIT-STATIC-PROPERTIES',
+    analyzePhase({ ts, node, moduleDoc, context }) {
+      switch (node.kind) {
+        case ts.SyntaxKind.VariableStatement:
+        case ts.SyntaxKind.FunctionDeclaration:
+          if (isMixin(node)) {
+            const { mixinFunction, mixinClass } = extractMixinNodes(node);
+            const { name } = handleName({}, mixinFunction);
+            handleStaticProperties(mixinClass, moduleDoc, context, name, ts);
+          }
+          break;
+
+        case ts.SyntaxKind.ClassDeclaration:
+          handleStaticProperties(node, moduleDoc, context, null, ts);
+          break;
+      }
+    },
+  };
+}
+
+function handleStaticProperties(classNode, moduleDoc, context, mixinName = null, ts) {
+  let className;
+  if (!mixinName) {
+    className = classNode?.name?.getText();
+  } else {
+    className = mixinName;
+  }
+  const currClass = moduleDoc?.declarations?.find(declaration => declaration.name === className);
+
+  classNode?.members?.forEach(member => {
+    if (hasStaticKeyword(member) && member.name.text === 'properties') {
+      const propertiesObject = getPropertiesObject(member);
+      propertiesObject?.properties?.forEach(property => {
+        if (property.kind !== ts.SyntaxKind.PropertyAssignment) return;
+
+        let classMember = {
+          kind: 'field',
+          name: property?.name?.getText() || '',
+          privacy: 'public',
+        };
+
+        const type = getType(property);
+        if (type) {
+          classMember.type = { text: type }
+        }
+
+        classMember = handleJsDoc(classMember, property);
+
+        const memberIndex = currClass?.members?.findIndex(field => field.name === classMember.name);
+        if (memberIndex >= 0) {
+          classMember = { ...classMember, ...currClass.members[memberIndex] };
+        }
+
+        if (isAlsoAttribute(property)) {
+          const attribute = createAttributeFromField(classMember);
+
+          /**
+           * If an attribute name is provided
+           * @example @property({attribute:'my-foo'})
+           */
+          const attributeName = getAttributeName(property);
+          if (attributeName) {
+            attribute.name = attributeName;
+            classMember.attribute = attributeName;
+          } else {
+            classMember.attribute = classMember.name;
+          }
+
+          if (reflects(property)) {
+            classMember.attribute = attribute.name;
+            classMember.reflects = true;
+          }
+
+          const attributeIndex = currClass?.attributes?.findIndex(
+            attr => attr.name === attribute.name,
+          );
+          if (attributeIndex >= 0) {
+            currClass.attributes[attributeIndex] = {
+              ...currClass.attributes[attributeIndex],
+              ...attribute,
+            };
+          } else {
+            currClass.attributes.push(attribute);
+          }
+        }
+
+        if (memberIndex >= 0) {
+          currClass.members[memberIndex] = classMember;
+        } else {
+          currClass.members.push(classMember);
+        }
+      });
+      return;
+    }
+  });
+
+  /** Get default values */
+  getDefaultValuesFromConstructorVisitor(classNode, currClass, context);
+}

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

@@ -0,0 +1,66 @@
+import ts from 'typescript';
+
+export function isAlsoAttribute(node) {
+  let result = true;
+  (node?.initializer || node)?.properties?.forEach((property) => {
+    if (
+      property.name.text === 'attribute' &&
+      property.initializer.kind === ts.SyntaxKind.FalseKeyword
+    ) {
+      result = false;
+    }
+  });
+  return result;
+}
+
+export function reflects(node) {
+  let result = false;
+  (node?.initializer || node)?.properties?.forEach((property) => {
+    if (
+      property.name.text === 'reflect' &&
+      property.initializer.kind === ts.SyntaxKind.TrueKeyword
+    ) {
+      result = true;
+    }
+  });
+  return result;
+}
+
+export function getType(node) {
+  let result = false;
+  (node?.initializer || node)?.properties?.forEach((property) => {
+    if (property.name.text === 'type') {
+      result = property.initializer.text.toLowerCase();
+    }
+  });
+  return result;
+}
+
+export function getAttributeName(node) {
+  let result = false;
+  (node?.initializer || node)?.properties?.forEach((property) => {
+    if (
+      property.name.text === 'attribute' &&
+      property.initializer.kind === ts.SyntaxKind.StringLiteral
+    ) {
+      result = property.initializer.text;
+    }
+  });
+  return result;
+}
+
+export function hasPropertyDecorator(node) {
+  return node?.modifiers?.some((decorator) => { 
+    return ts.isDecorator(decorator) && decorator?.expression?.expression?.getText() === 'property'
+  });
+}
+
+export const hasStaticKeyword = node => node?.modifiers?.some(mod => mod.kind === ts.SyntaxKind.StaticKeyword);
+
+export function getPropertiesObject(node) {
+  if (ts.isGetAccessor(node)) {
+    return node.body?.statements?.find(ts.isReturnStatement)?.expression;
+  } else {
+    return node.initializer;
+  }
+}

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

@@ -0,0 +1,129 @@
+import { decorator, toKebabCase } from '../../../utils/index.js'
+
+export function stencilPlugin() {
+  let events = [];
+
+  const METHOD_DENYLIST = ['componentWillLoad', 'componentDidLoad', 'componentShouldUpdate', 'componentWillRender', 'componentDidRender', 'componentWillUpdate', 'componentDidUpdate'];
+
+  return {
+    name: 'CORE - STENCIL',
+    // Runs for each module
+    analyzePhase({ts, node, moduleDoc}){
+      switch (node.kind) {
+        case ts.SyntaxKind.ClassDeclaration:
+          /**
+           * Add tagName to classDoc, extracted from `@Component({tag: 'foo-bar'})` decorator
+           * Add custom-element-definition to exports
+           */
+          const componentDecorator = node?.modifiers?.find(decorator('Component'))?.expression;
+
+          const tagName = componentDecorator?.arguments?.[0]?.properties?.find(prop => {
+            return prop?.name?.getText() === 'tag'
+          })?.initializer?.text;
+
+          const className = node?.name?.getText();
+          const currClass = moduleDoc?.declarations?.find(declaration => declaration.name === className);
+          if(tagName) {
+            currClass.tagName = tagName;
+            moduleDoc.exports.push({
+              kind: "custom-element-definition",
+              name: tagName,
+              declaration: {
+                name: className,
+                module: moduleDoc.path
+              }
+            });
+          }
+
+          /**
+           * Collect fields with `@Event()` decorator so we can process them in `moduleLinkPhase`
+           */
+          const eventFields = node?.members
+            ?.filter(member => member?.modifiers?.find(decorator('Event')))
+            ?.map(member => {
+              const eventDecorator = member?.modifiers?.find(decorator('Event'));
+              const eventName = eventDecorator?.expression?.arguments?.[0]?.properties?.find(prop => {
+                return prop?.name?.getText() === 'eventName'
+              })?.initializer?.text;
+
+              return { field: member?.name?.getText(), as: eventName || member?.name?.getText() }
+            });
+          events = [...(eventFields || [])];
+
+          /**
+           * Handle `@Prop` decorator, and store attributes to add to manifest later
+           * - if type is primitive -> create attr
+           *  - if not `{ attribute: ''}` in decorator, just kebabcase the fieldname, otherwise use the value provided
+           * - if type is not primitive -> no attr
+           * - add fieldName to attr
+           */
+          node?.members
+            ?.filter(member => member?.modifiers?.find(decorator('Prop')))
+            ?.forEach(property => {
+              const fieldName = property?.name?.text;
+              const attrNameFromDecorator = property?.modifiers?.[0]?.expression?.arguments?.[0]?.properties?.find(prop => prop?.name?.getText() === 'attribute')?.initializer?.text;
+              const attrName = attrNameFromDecorator || toKebabCase(property?.name?.text);
+
+              const reflects = property?.modifiers?.[0]?.expression?.arguments?.[0]?.properties?.find(prop => prop?.name?.getText() === 'reflects')?.initializer?.getText?.() === 'true';
+              const member = currClass?.members?.find(mem => mem?.name === fieldName);
+              if(reflects) {
+                member.reflects = true;
+                member.attribute = attrName;
+              }
+
+              if(!currClass.attributes) currClass.attributes = [];
+              const hasType = !!property?.type?.getText?.();
+
+                currClass.attributes.push({
+                  name: attrName,
+                  fieldName,
+                  ...(member?.default ? { default: member.default } : {}),
+                  ...(member?.description ? { description: member.description } : {}),
+                  ...(hasType ? {
+                    type: { text: property?.type?.getText?.() }
+                  } : {})
+                })
+            });
+
+          break;
+      }
+    },
+
+    // Runs for each module, after analyzing, all information about your module should now be available
+    moduleLinkPhase({moduleDoc}){
+      /**
+       * Remove lifecycle methods
+       */
+      const classes = moduleDoc?.declarations?.filter(declaration => declaration.kind === 'class');
+
+      classes?.forEach(klass => {
+        if(!klass?.members) return;
+        klass.members = klass?.members?.filter(member => {
+          return !METHOD_DENYLIST.includes(member.name)
+        });
+      });
+
+      /**
+       * Events
+       */
+      classes?.forEach(klass => {
+        if(!klass?.members) return;
+        const eventsAsFields = klass.members
+          ?.filter(member => events.some(event => event.field === member.name))
+          ?.map(member => {
+            delete member.privacy;
+            delete member.kind;
+            member.name = events.find(event => event.field === member.name).as;
+            return member;
+          }) || [];
+
+        /* Add events as eventDocs */
+        klass.events = [...(klass?.events || []), ...eventsAsFields]
+
+        /* Remove events as class fields */
+        klass.members = klass?.members?.filter(member => !events.some(event => event.field === member.name || event.as === member.name));
+      });
+
+    }
+  }
+}

package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/index.js

@@ -0,0 +1,80 @@
+/**
+ * COLLECT
+ */
+import { collectImportsPlugin } from './collect-phase/collect-imports.js';
+
+/**
+ * ANALYSE
+ */
+import { exportsPlugin } from './analyse-phase/exports.js';
+import { customElementsDefineCallsPlugin } from './analyse-phase/custom-elements-define-calls.js';
+import { functionLikePlugin } from './analyse-phase/function-like.js';
+import { arrowFunctionPlugin } from './analyse-phase/arrow-function.js';
+import { classPlugin } from './analyse-phase/classes.js';
+import { mixinPlugin } from './analyse-phase/mixins.js';
+import { variablePlugin } from './analyse-phase/variables.js';
+import { classJsDocPlugin } from './analyse-phase/class-jsdoc.js';
+import { reexportedWrappedMixinExportsPlugin } from './analyse-phase/reexported-wrapped-mixin-exports.js';
+
+/**
+ * LINK
+ */
+import { methodDenyListPlugin } from './link-phase/method-denylist.js';
+import { fieldDenyListPlugin } from './link-phase/field-denylist.js';
+import { cleanupClassesPlugin } from './link-phase/cleanup-classes.js';
+
+/**
+ * POST-PROCESSING
+ */
+import { removeUnexportedDeclarationsPlugin } from './post-processing/remove-unexported-declarations.js';
+import { resolveInitializersPlugin } from './post-processing/resolve-initializers.js';
+import { isCustomElementPlugin } from './post-processing/is-custom-element.js';
+import { linkClassToTagnamePlugin } from './post-processing/link-class-to-tagname.js';
+import { applyInheritancePlugin } from './post-processing/apply-inheritance.js';
+
+/**
+ * FRAMEWORKS
+ */
+import { stencilPlugin } from './framework-plugins/stencil/stencil.js';
+import { catalystPlugin } from './framework-plugins/catalyst/catalyst.js';
+import { catalystPlugin2 } from './framework-plugins/catalyst-major-2/catalyst.js';
+import { fastPlugin } from './framework-plugins/fast/fast.js';
+import { litPlugin } from './framework-plugins/lit/lit.js';
+
+/** 
+ * Establish the execution order of plugins 
+ */
+export const FEATURES = [
+  /** COLLECT */
+  collectImportsPlugin(),
+  
+  /** ANALYSE */
+  exportsPlugin(),
+  customElementsDefineCallsPlugin(),
+  functionLikePlugin(),
+  arrowFunctionPlugin(),
+  classPlugin(),
+  mixinPlugin(),
+  variablePlugin(),
+  reexportedWrappedMixinExportsPlugin(),
+  classJsDocPlugin(),
+
+  /** LINK */
+  methodDenyListPlugin(),
+  fieldDenyListPlugin(),
+  cleanupClassesPlugin(),
+  
+  /** POST-PROCESSING */
+  resolveInitializersPlugin(),
+  linkClassToTagnamePlugin(),
+  isCustomElementPlugin(),
+  applyInheritancePlugin(),
+  removeUnexportedDeclarationsPlugin(),
+
+  /** FRAMEWORKS */
+  // litPlugin()
+  // fastPlugin()
+  // stencilPlugin()
+  // catalystPlugin()
+  // catalystPlugin2()
+].flat();

package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/link-phase/cleanup-classes.js

@@ -0,0 +1,25 @@
+import { has } from "../../utils/index.js"
+
+/**
+ * CLEANUP-CLASSES
+ *
+ * Removes empty arrays from classes; e.g. if a class doesn't have any `members`,
+ * then we remove it from the class doc
+ */
+export function cleanupClassesPlugin() {
+  return {
+    name: 'CORE - CLEANUP-CLASSES',
+    moduleLinkPhase({moduleDoc}){
+      const classes = moduleDoc?.declarations?.filter(declaration => declaration.kind === 'class' || declaration.kind === 'mixin');
+
+      classes?.forEach(klass => {
+        ['cssProperties', 'cssParts', 'slots', 'members', 'attributes', 'events', 'cssStates'].forEach(field => {
+          if(!has(klass[field])) {
+            delete klass[field];
+          }
+        });
+      });
+    },
+  }
+}
+

package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/link-phase/field-denylist.js

@@ -0,0 +1,22 @@
+/**
+ * FIELD-DENY-LIST
+ * 
+ * Excludes fields from the manifest
+ */
+export function fieldDenyListPlugin() {
+  const FIELD_DENY_LIST = [
+    'observedAttributes',
+  ];
+
+  return {
+    name: 'CORE - FIELD-DENYLIST',
+    moduleLinkPhase({moduleDoc}){
+      const classes = moduleDoc?.declarations?.filter(declaration => declaration.kind === 'class' || declaration.kind === 'mixin');
+
+      classes?.forEach(klass => {
+        klass.members = klass?.members?.filter(member => !FIELD_DENY_LIST.includes(member.name));
+      });
+    },
+  }
+}
+

package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/link-phase/method-denylist.js

@@ -0,0 +1,25 @@
+/**
+ * METHOD-DENY-LIST
+ * 
+ * Excludes methods from the manifest
+ */
+export function methodDenyListPlugin() {
+  const METHOD_DENY_LIST = [
+    'connectedCallback',
+    'disconnectedCallback',
+    'attributeChangedCallback',
+    'adoptedCallback'
+  ];
+
+  return {
+    name: 'CORE - METHOD-DENYLIST',
+    moduleLinkPhase({moduleDoc}){
+      const classes = moduleDoc?.declarations?.filter(declaration => declaration.kind === 'class' || declaration.kind === 'mixin');
+
+      classes?.forEach(klass => {
+        klass.members = klass?.members?.filter(member => !METHOD_DENY_LIST.includes(member.name));
+      });
+    },
+  }
+}
+

package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/post-processing/apply-inheritance.js

@@ -0,0 +1,78 @@
+import { getAllDeclarationsOfKind, getModuleForClassLike, getModuleFromManifests, getInheritanceTree } from '../../utils/manifest-helpers.js';
+import { resolveModuleOrPackageSpecifier } from '../../utils/index.js';
+
+/**
+ * APPLY-INHERITANCE-PLUGIN
+ *
+ * Applies inheritance for all classes in the manifest
+ */
+export function applyInheritancePlugin() {
+  return {
+    name: 'CORE - APPLY-INHERITANCE',
+    packageLinkPhase({customElementsManifest, context}){
+      const allManifests = [customElementsManifest, ...(context.thirdPartyCEMs || [])];
+      const classLikes = [];
+
+      allManifests.forEach((manifest) => {
+        const classes =  getAllDeclarationsOfKind(manifest, 'class');
+        const mixins =  getAllDeclarationsOfKind(manifest, 'mixin');
+        classLikes.push(...[...classes, ...mixins]);
+      });
+
+      classLikes.forEach((customElement) => {
+        const inheritanceChain = getInheritanceTree(allManifests, customElement.name);
+
+        inheritanceChain?.forEach(klass => {
+          // ignore the current class itself
+          if (klass?.name === customElement.name) {
+            return;
+          }
+
+          ['slots', 'cssParts', 'cssProperties', 'attributes', 'members', 'events', 'cssStates'].forEach(type => {
+            klass?.[type]?.forEach(currItem => {
+              const containingModulePath = getModuleForClassLike(allManifests, klass.name);
+              const containingModule = getModuleFromManifests(allManifests, containingModulePath);
+
+              const newItem = { ...currItem };
+
+              /**
+                * If an attr or member is already present in the base class, but we encounter it here,
+                * it means that the base has overridden that method from the super class
+                * So we either add the data to the overridden method, or we add it to the array as a new item
+                */
+              const existing = customElement?.[type]?.find(item => newItem.name === item.name);
+
+              if (existing) {
+
+                existing.inheritedFrom = {
+                  name: klass.name,
+                  ...resolveModuleOrPackageSpecifier(containingModule, context, klass.name)
+                }
+
+                customElement[type] = customElement?.[type]?.map(item => item.name === existing.name
+                  ? {
+                      ...newItem,
+                      ...existing,
+                    // Patch: Custom patch to not merge child parent privacy/type
+                    // https://github.com/open-wc/custom-elements-manifest/pull/300
+                    //   ...{
+                    //     ...(newItem.type ? { type: newItem.type } : {}),
+                    //     ...(newItem.privacy ? { privacy: newItem.privacy } : {})
+                    //   }
+                    }
+                  : item);
+              } else {
+                newItem.inheritedFrom = {
+                  name: klass.name,
+                  ...resolveModuleOrPackageSpecifier(containingModule, context, klass.name)
+                }
+
+                customElement[type] = [...(customElement[type] || []), newItem];
+              };
+            });
+          });
+        });
+      });
+    }
+  }
+}

package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/post-processing/is-custom-element.js

@@ -0,0 +1,34 @@
+const BASECLASSES = [
+  'htmlelement', 
+  'litelement', 
+  'fastelement'
+];
+
+/**
+ * ISCUSTOMELEMENT
+ * 
+ * Heuristic to see whether or not a class is a custom element
+ */
+export function isCustomElementPlugin() {
+  return {
+    name: 'CORE - IS-CUSTOM-ELEMENT',
+    packageLinkPhase({customElementsManifest, context}) {
+      customElementsManifest?.modules?.forEach(_module => {
+        _module?.declarations?.forEach(declaration => {
+          if(declaration?.kind === 'class') {
+            /** If a class has a tagName, that means its been defined, and is a custom element */
+            if(declaration?.tagName) {
+              declaration.customElement = true;
+            }
+            
+            /** If a class extends from any of these, its a custom element */
+            if(BASECLASSES.includes(declaration?.superclass?.name?.toLowerCase())) {
+              declaration.customElement = true;
+            }
+          }
+        });
+      });
+    }
+  }
+}
+

package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/post-processing/link-class-to-tagname.js

@@ -0,0 +1,27 @@
+import { getAllDeclarationsOfKind, getAllExportsOfKind } from '../../utils/manifest-helpers.js';
+
+/**
+ * LINK-CLASS-TO-TAGNAME
+ * 
+ * Links a custom element definition to its corresponding class
+ */
+export function linkClassToTagnamePlugin() {
+  return {
+    name: 'CORE - LINK-CLASS-TO-TAGNAME',
+    packageLinkPhase({customElementsManifest, context}){
+      /* Get all class declarations and custom element definitions in the manifest */
+      const classes = getAllDeclarationsOfKind(customElementsManifest, 'class');
+      const definitions = getAllExportsOfKind(customElementsManifest, 'custom-element-definition');
+
+      /* Loop through all classes, and try to find their corresponding custom element definition */
+      classes?.forEach((klass) => {
+        const tagName = definitions?.find(def => def?.declaration?.name === klass?.name)?.name;
+
+        /* If there's a match, we can link the custom element definition to the class */
+        if (tagName && !klass.tagName) {
+          klass.tagName = tagName;
+        }
+      });
+    }
+  }
+}

package/lib/cem/patch/@custom-elements-manifest/analyzer/src/features/post-processing/remove-unexported-declarations.js

@@ -0,0 +1,23 @@
+import { has } from '../../utils/index.js';
+
+/**
+ * REMOVE-UNEXPORTED-DECLARATIONS
+ * 
+ * If a module has declarations that are _not_ exported, that means those declarations are considered 'private' to that module, and they shouldnt be present in the manifest, so we remove them.
+ */
+export function removeUnexportedDeclarationsPlugin() {
+  return {
+    name: 'CORE - REMOVE-UNEXPORTED-DECLARATIONS',
+    packageLinkPhase({customElementsManifest}){
+      customElementsManifest?.modules?.forEach(mod => {
+        if(has(mod?.declarations)) {
+          mod.declarations = mod?.declarations?.filter(declaration => {
+            return mod?.exports?.some(_export => {
+              return declaration?.name === _export?.name || declaration?.name === _export?.declaration?.name;
+            });
+          });
+        }
+      });
+    },
+  }
+}