@ui5/webcomponents-tools 0.0.0-b132dd7b9 → 0.0.0-b3a4f8020

package/lib/cem/merge.mjs

@@ -0,0 +1,220 @@
+import { pathToFileURL } from "url";
+import path from "path";
+import { createRequire } from 'module';
+import { readFile, writeFile } from "fs/promises";
+
+const require = createRequire(import.meta.url);
+
+const UI5_BASE_CLASS = "UI5Element";
+
+const main = async (argv) => {
+    let customElementsPath = null;
+    const CACHED_CEMS = new Map();
+    const DECLARATION_PACKAGE = new WeakMap();
+    const DECLARATION_MODULE = new WeakMap();
+
+    function removeInheritedFrom(obj) {
+        if (obj === null || typeof obj !== 'object') {
+            return obj;
+        }
+
+        if (Array.isArray(obj)) {
+            return obj.map(item => removeInheritedFrom(item));
+        }
+
+        const result = {};
+        for (const [key, value] of Object.entries(obj)) {
+            if (key === 'inheritedFrom') {
+                continue;
+            }
+            result[key] = removeInheritedFrom(value);
+        }
+        return result;
+    }
+
+    async function readPackageJson(filePath) {
+        try {
+            return JSON.parse(await readFile(filePath, "utf-8"));
+        } catch (error) {
+            throw new Error(`Failed to read package.json at ${filePath}: ${error.message}`);
+        }
+    }
+
+    async function loadPackageJson(depName) {
+        try {
+            // First try the standard require method (works when exports includes package.json)
+            const pkg = require(`${depName}/package.json`);
+            const pkgPath = require.resolve(`${depName}/package.json`);
+            return { path: path.dirname(pkgPath), pkg };
+        } catch (e) {
+            // If that fails, resolve the package path and read package.json directly
+            try {
+                const packagePath = require.resolve(depName);
+                let currentDir = path.dirname(packagePath);
+
+                // Navigate up to find package.json (the resolved path might be deep in dist/ or similar)
+                while (currentDir !== path.parse(currentDir).root) {
+                    try {
+                        const pkgPath = path.join(currentDir, 'package.json');
+                        const content = await readFile(pkgPath, 'utf-8');
+                        const pkg = JSON.parse(content);
+
+                        // Verify this is the correct package.json by checking the name
+                        if (pkg.name === depName) {
+                            return { path: currentDir, pkg };
+                        }
+                    } catch {
+                        // Continue searching up the directory tree
+                    }
+                    currentDir = path.dirname(currentDir);
+                }
+            } catch (resolveError) {
+                // console.warn(`Could not resolve ${depName}:`, resolveError.message);
+            }
+            return null;
+        }
+    }
+
+    async function collectThirdPartyCem() {
+        const packageJSONPath = path.resolve(process.cwd(), "package.json");
+        const packageJSON = await readPackageJson(packageJSONPath);
+
+        const dependencyKeys = Object.keys(packageJSON).filter(key => key.toLowerCase().includes("dependencies"));
+        const dependencies = dependencyKeys.flatMap(key => Object.keys(packageJSON[key]));
+
+        const thirdPartCEM = (await Promise.all(dependencies.map(async dep => {
+            const result = await loadPackageJson(dep);
+            if (!result?.pkg?.customElements) return null;
+
+            return {
+                path: result.path,
+                name: dep,
+                cem: result.pkg.customElements
+            };
+        }))).filter(Boolean);
+
+        await Promise.all(thirdPartCEM.map(async dep => {
+            const cemPath = path.resolve(dep.path, dep.cem);
+            try {
+                const cemContent = JSON.parse(await readFile(cemPath, "utf-8"));
+                CACHED_CEMS.set(dep.name, cemContent);
+            } catch (error) {
+                console.warn(`Failed to read CEM for ${dep.name} from ${cemPath}: ${error.message}`);
+            }
+        }));
+    }
+
+    async function readCurrentCEM() {
+        const packageJSONPath = path.resolve(process.cwd(), "package.json");
+        const packageJSON = await readPackageJson(packageJSONPath);
+
+        if (!packageJSON?.customElements) {
+            return null;
+        }
+
+        customElementsPath = packageJSON.customElements;
+        const cemPath = path.resolve(process.cwd(), customElementsPath);
+
+        try {
+            const cemContent = JSON.parse(await readFile(cemPath, "utf-8"));
+            CACHED_CEMS.set(packageJSON.name, cemContent);
+            return cemContent;
+        } catch (error) {
+            throw new Error(`Failed to read CEM from ${cemPath}: ${error.message}`);
+        }
+    }
+
+    async function resolveReference(ref) {
+        const pkg = CACHED_CEMS.get(ref.package);
+
+        if (!pkg) {
+            return null;
+        }
+
+        const mod = (pkg.modules || []).find(m => m.path === ref.module);
+
+        if (!mod) {
+            return null;
+        }
+
+        const declaration = (mod.declarations || []).find(d => d.name === ref.name);
+
+        if (!declaration) {
+            return null;
+        }
+
+        DECLARATION_PACKAGE.set(declaration, ref.package);
+        DECLARATION_MODULE.set(declaration, ref.module);
+
+        return resolveDeclaration(declaration);
+    }
+
+    async function resolveDeclaration(declaration) {
+        if (!declaration.superclass || declaration.superclass.name === UI5_BASE_CLASS) {
+            return [declaration];
+        }
+
+        const superclassDeclarations = await resolveReference(declaration.superclass);
+        return [declaration, superclassDeclarations].flat().filter(Boolean);
+    }
+
+    const merge = async () => {
+        const currentCEM = await readCurrentCEM();
+        if (!currentCEM) {
+            throw new Error("No custom elements manifest found in current project");
+        }
+
+        await collectThirdPartyCem();
+
+        const modules = currentCEM.modules || [];
+
+        for (const mod of modules) {
+            const declarations = (mod.declarations || []).filter(d => d.kind === "class");
+
+            for (const declaration of declarations) {
+                const declarationHierarchy = await resolveDeclaration(declaration);
+                const allKeys = declarationHierarchy.flatMap(dec => Object.keys(dec));
+                const uniqueKeys = [...new Set(allKeys)];
+                const arrayKeys = uniqueKeys
+                    .filter(key => !key.startsWith("_ui5"))
+                    .filter(key => declarationHierarchy.some(dec => Array.isArray(dec[key])));
+
+                for (const key of arrayKeys) {
+                    const allItems = declarationHierarchy.flatMap(dec => dec[key] || []);
+
+                    // Remove duplicates based on name property
+                    const seen = new Set();
+                    declaration[key] = allItems.filter(item => {
+                        if (!item.name) return true;
+                        if (seen.has(item.name)) return false;
+                        seen.add(item.name);
+                        return true;
+                    });
+                }
+            }
+        }
+
+        const cleanedCEM = removeInheritedFrom(currentCEM);
+        const outputPath = path.resolve(process.cwd(), customElementsPath);
+
+        try {
+            await writeFile(outputPath, JSON.stringify(cleanedCEM, null, 2), "utf-8");
+            console.log(`Successfully merged CEM to ${outputPath}`);
+        } catch (error) {
+            throw new Error(`Failed to write merged CEM to ${outputPath}: ${error.message}`);
+        }
+    };
+
+    await merge();
+}
+
+const filePath = process.argv[1];
+const fileUrl = pathToFileURL(filePath).href;
+
+if (import.meta.url === fileUrl) {
+    main(process.argv)
+}
+
+export default {
+    _ui5mainFn: main
+}

package/lib/cem/patch/@custom-elements-manifest/analyzer/cli.js

@@ -0,0 +1,128 @@
+#!/usr/bin/env node
+
+import ts from 'typescript';
+import path from 'path';
+// Patch: Custom patch to not merge child parent privacy/type
+// https://github.com/open-wc/custom-elements-manifest/pull/300
+import { globby } from 'globby';
+import fs from 'fs';
+import commandLineArgs from 'command-line-args';
+import chokidar from 'chokidar';
+import debounce from 'debounce';
+
+import { create } from './src/create.js';
+import {
+  getUserConfig,
+  getCliConfig,
+  addFrameworkPlugins,
+  addCustomElementsPropertyToPackageJson,
+  mergeGlobsAndExcludes,
+  timestamp,
+  DEFAULTS,
+  MENU,
+} from './src/utils/cli-helpers.js';
+import { findExternalManifests } from './src/utils/find-external-manifests.js';
+
+/**
+ * @param {{argv:string[]; cwd: string; noWrite:boolean}} [opts]
+ */
+export async function cli({ argv = process.argv, cwd = process.cwd(), noWrite } = {}) {
+  const mainDefinitions = [{ name: 'command', defaultOption: true }];
+  const mainOptions = commandLineArgs(mainDefinitions, { stopAtFirstUnknown: true, argv });
+  const cliArgs = mainOptions._unknown || [];
+
+  if (mainOptions.command === 'analyze') {
+    const { config: configPath, ...cliConfig } = getCliConfig(cliArgs);
+    const userConfig = await getUserConfig(configPath, cwd);
+
+    /**
+     * Merged config options
+     * Command line options override userConfig options
+     */
+    const mergedOptions = { ...DEFAULTS, ...userConfig, ...cliConfig };
+    const merged = mergeGlobsAndExcludes(DEFAULTS, userConfig, cliConfig);
+    async function run() {
+      const globs = await globby(merged, { cwd });
+      const modules = userConfig?.overrideModuleCreation
+        ? userConfig.overrideModuleCreation({ ts, globs })
+        : globs.map((glob) => {
+            const fullPath = path.resolve(cwd, glob);
+            const source = fs.readFileSync(fullPath).toString();
+
+            return ts.createSourceFile(glob, source, ts.ScriptTarget.ES2015, true);
+          });
+
+      let thirdPartyCEMs = [];
+      if (mergedOptions?.dependencies) {
+        try {
+          const fullPathGlobs = globs.map(glob => path.resolve(cwd, glob));
+          thirdPartyCEMs = await findExternalManifests(fullPathGlobs, {basePath: cwd});
+        } catch (e) {
+          if (mergedOptions.dev) console.log(`Failed to add third party CEMs. \n\n${e.stack}`);
+        }
+      }
+
+      let plugins = await addFrameworkPlugins(mergedOptions);
+      plugins = [...plugins, ...(userConfig?.plugins || [])];
+
+      const context = { dev: mergedOptions.dev, thirdPartyCEMs };
+
+      /**
+       * Create the manifest
+       */
+       const customElementsManifest = create({modules, plugins, context});
+
+       if (mergedOptions.dev) {
+        console.log(JSON.stringify(customElementsManifest, null, 2));
+      }
+
+      if(!noWrite) {
+        const outdir = path.join(cwd, mergedOptions.outdir);
+        if (!fs.existsSync(outdir)) {
+          fs.mkdirSync(outdir, { recursive: true });
+        }
+        fs.writeFileSync(
+          path.join(outdir, 'custom-elements.json'),
+          `${JSON.stringify(customElementsManifest, null, 2)}\n`,
+        );
+       }
+
+      if (!mergedOptions.quiet) {
+        console.log(`[${timestamp()}] @custom-elements-manifest/analyzer: Created new manifest.`);
+      }
+
+      return customElementsManifest;
+    }
+    /** The manifest that will be returned for programmatic calls of cli */
+    const manifest = await run();
+
+    /**
+     * Watch mode
+     */
+    if (mergedOptions.watch) {
+      const fileWatcher = chokidar.watch(merged);
+
+      const onChange = debounce(run, 100);
+
+      fileWatcher.addListener('add', onChange);
+      fileWatcher.addListener('change', onChange);
+      fileWatcher.addListener('unlink', onChange);
+    }
+
+    try {
+      if (mergedOptions.packagejson) {
+        addCustomElementsPropertyToPackageJson(mergedOptions.outdir);
+      }
+    } catch {
+      console.log(
+        `Could not add 'customElements' property to ${cwd}${
+          path.sep
+        }package.json. \nAdding this property helps tooling locate your Custom Elements Manifest. Please consider adding it yourself, or file an issue if you think this is a bug.\nhttps://www.github.com/open-wc/custom-elements-manifest`,
+      );
+    }
+
+    return manifest;
+  } else {
+    console.log(MENU);
+  }
+}

package/lib/cem/patch/@custom-elements-manifest/analyzer/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@custom-elements-manifest/analyzer",
+  "version": "0.10.10",
+  "description": "",
+  "license": "MIT",
+  "type": "module",
+  "types": "index.d.ts",
+  "bin": {
+    "custom-elements-manifest": "./cem.js",
+    "cem": "./cem.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/open-wc/custom-elements-manifest.git",
+    "directory": "packages/analyzer"
+  },
+  "author": "open-wc",
+  "homepage": "https://github.com/open-wc/custom-elements-manifest",
+  "bugs": {
+    "url": "https://github.com/open-wc/custom-elements-manifest"
+  },
+  "main": "index.js",
+  "scripts": {
+    "prepublishOnly": "npm test && npm run build:browser",
+    "start": "nodemon --ignore './custom-elements.json' cem.js analyze --dev --fast",
+    "test": "asdgf",
+    "build:browser": "esbuild src/browser-entrypoint.js --bundle --format=esm --outfile=browser/index.js",
+    "test:watch": "watchexec -w src -w test npm test",
+    "update-fixtures": "node scripts/update-version.js --version 1.0.0"
+  },
+  "keywords": [
+    "custom-elements",
+    "custom-elements-json",
+    "custom-elements-manifest",
+    "customelements",
+    "webcomponents",
+    "customelementsjson",
+    "customelementsmanifest"
+  ],
+  "dependencies": {
+    "@custom-elements-manifest/find-dependencies": "^0.0.6",
+    "@github/catalyst": "^1.6.0",
+    "@web/config-loader": "0.1.3",
+    "chokidar": "3.5.2",
+    "command-line-args": "5.1.2",
+    "comment-parser": "1.2.4",
+    "custom-elements-manifest": "1.0.0",
+    "debounce": "1.2.1",
+    "globby": "11.0.4",
+    "typescript": "~5.4.2"
+  },
+  "devDependencies": {},
+  "contributors": [
+    "Pascal Schilp <pascalschilp@gmail.com>",
+    "Benny Powers <web@bennypowers.com>",
+    "Matias Huhta <huhta.matias@gmail.com>"
+  ],
+  "customElements": "custom-elements.json"
+}

package/lib/cem/patch/@custom-elements-manifest/analyzer/src/browser-entrypoint.js

@@ -0,0 +1,23 @@
+/**
+ * This file is the entrypoint for rollup to correctly bundle the analyzer for the browser.
+ * Do not use directly, but import from ./browser/index.js
+ */
+
+import ts from 'typescript';
+
+import { create } from './create.js';
+import { catalystPlugin } from './features/framework-plugins/catalyst/catalyst.js';
+import { catalystPlugin2 } from './features/framework-plugins/catalyst-major-2/catalyst.js';
+import { stencilPlugin } from './features/framework-plugins/stencil/stencil.js';
+import { litPlugin } from './features/framework-plugins/lit/lit.js';
+import { fastPlugin } from './features/framework-plugins/fast/fast.js';
+
+export { 
+  ts,
+  create,
+  catalystPlugin,
+  catalystPlugin2,
+  stencilPlugin,
+  litPlugin,
+  fastPlugin
+};

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

@@ -0,0 +1,117 @@
+import ts from 'typescript';
+import { FEATURES } from './features/index.js';
+import { withErrorHandling } from './utils/index.js';
+
+/**
+ * CORE
+ *
+ * This function is the core of the analyzer. It takes an array of ts sourceFiles, and creates a
+ * custom elements manifest.
+ */
+export function create({modules, plugins = [], context = {dev:false}}) {
+  const customElementsManifest = {
+    schemaVersion: '1.0.0',
+    readme: '',
+    modules: [],
+  };
+
+  const { dev } = context;
+
+  const mergedPlugins = [
+    ...FEATURES,
+    ...plugins,
+  ];
+
+  if(dev) console.log('[INITIALIZE PLUGINS]');
+  mergedPlugins.forEach(({name, initialize}) => {
+    withErrorHandling(name, () => {
+      initialize?.({ts, customElementsManifest, context});
+    });
+  });
+
+  modules.forEach(currModule => {
+    if(dev) console.log('[COLLECT PHASE]: ', currModule.fileName);
+    /**
+     * COLLECT PHASE
+     * First pass through all modules. Can be used to gather imports, exports, types, default values,
+     * which you may need to know the existence of in a later phase.
+     */
+    collect(currModule, context, mergedPlugins);
+  });
+
+  modules.forEach(currModule => {
+    if(dev) console.log('[ANALYZE PHASE]: ', currModule.fileName);
+    const moduleDoc = {
+      kind: "javascript-module",
+      path: currModule.fileName,
+      declarations: [],
+      exports: []
+    };
+
+    /**
+     * ANALYZE PHASE
+     * Go through the AST of every separate module, and gather as much as information as we can
+     * This includes a modules imports, which are not specified in custom-elements.json, but are
+     * required for the LINK PHASE, and deleted when processed
+     */
+    analyze(currModule, moduleDoc, context, mergedPlugins);
+    customElementsManifest.modules.push(moduleDoc);
+
+    if(dev) console.log('[MODULE LINK PHASE]: ', currModule.fileName);
+    /**
+     * LINK PHASE
+     * All information for a module has been gathered, now we can link information together. Like:
+     * - Finding a CustomElement's tagname by finding its customElements.define() call (or 'export')
+     * - Applying inheritance to classes (adding `inheritedFrom` properties/attrs/events/methods)
+     */
+    mergedPlugins.forEach(({name, moduleLinkPhase}) => {
+      withErrorHandling(name, () => {
+        moduleLinkPhase?.({ts, moduleDoc, context});
+      });
+    });
+  });
+
+  if(dev) console.log('[PACKAGE LINK PHASE]');
+  /**
+   * PACKAGE LINK PHASE
+   * All modules have now been parsed, we can now link information from across modules together
+   * - Link classes to their definitions etc
+   * - Match tagNames for classDocs
+   * - Apply inheritance
+   */
+  mergedPlugins.forEach(({name, packageLinkPhase}) => {
+    withErrorHandling(name, () => {
+      packageLinkPhase?.({customElementsManifest, context});
+    });
+  });
+
+  return customElementsManifest;
+}
+
+function collect(source, context, mergedPlugins) {
+  visitNode(source);
+
+  function visitNode(node) {
+    mergedPlugins.forEach(({name, collectPhase}) => {
+      withErrorHandling(name, () => {
+        collectPhase?.({ts, node, context});
+      });
+    });
+
+    ts.forEachChild(node, visitNode);
+  }
+}
+
+function analyze(source, moduleDoc, context, mergedPlugins) {
+  visitNode(source);
+
+  function visitNode(node) {
+    mergedPlugins.forEach(({name, analyzePhase}) => {
+      withErrorHandling(name, () => {
+        analyzePhase?.({ts, node, moduleDoc, context});
+      });
+    });
+
+    ts.forEachChild(node, visitNode);
+  }
+}

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

@@ -0,0 +1,26 @@
+import { hasInitializer } from '../../utils/ast-helpers.js';
+import { isMixin } from '../../utils/mixins.js';
+import { createArrowFunction } from './creators/createArrowFunction.js';
+
+
+/**
+ * arrowFunctionPlugin
+ * 
+ * handles arrow functions
+ */
+export function arrowFunctionPlugin() {
+  return {
+    name: 'CORE - ARROW-FUNCTION',
+    analyzePhase({ts, node, moduleDoc}){
+      switch(node.kind) {
+        case ts.SyntaxKind.VariableStatement:
+          if(!isMixin(node) && hasInitializer(node)) {
+            const functionLike = createArrowFunction(node);
+            moduleDoc.declarations.push(functionLike);
+          }
+          break;
+      }
+    }
+  }
+}
+