Merge pull request #1128 from Trendyol/next

v3.4.0

Author: erbilnas

.github/workflows/scorecard.yml

@@ -41,14 +41,14 @@ jobs:
           persist-credentials: false
 
       - name: "Run analysis"
-        uses: ossf/scorecard-action@0864cf19026789058feabb7e87baa5f140aac736
+        uses: ossf/scorecard-action@f49aabe0b5af0936a0987cfb85d86b75731b0186
         with:
           results_file: results.sarif
           results_format: sarif
           publish_results: true
 
       - name: "Upload artifact"
-        uses: actions/upload-artifact@65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08 # v4.6.0
+        uses: actions/upload-artifact@4cec3d8aa04e39d1a68397de0c4cd6fb9dce8ec1 # v4.6.1
         with:
           name: SARIF file
           path: results.sarif

.github/workflows/security-gates.yml

@@ -19,3 +19,4 @@ jobs:
       actions: read
       contents: read
       security-events: write
+    secrets: inherit

cemPlugins/addJsDoc.js

@@ -0,0 +1,55 @@
+import { parse } from "comment-parser";
+
+/**
+ * @returns {import('@custom-elements-manifest/analyzer').Plugin}
+ */
+export function addJsDoc() {
+  return {
+    name: "add-js-doc",
+    /**
+     * @param {object} params
+     * @param {typeof import("typescript")} params.ts
+     * @param {import('typescript').Node} params.node
+     * @param {import('@custom-elements-manifest/analyzer').AnalyzePhaseParams.moduleDoc} params.moduleDoc
+     */
+    analyzePhase({ ts, node, moduleDoc }) {
+      if (node.kind === ts.SyntaxKind.ClassDeclaration) {
+        const className = node.name.getText();
+        const classDoc = moduleDoc?.declarations?.find(
+          declaration => declaration.name === className
+        );
+        const customTags = ["tag", "summary", "cssproperty"];
+        let customComments = "/**";
+
+        node.jsDoc?.forEach(jsDoc => {
+          jsDoc?.tags?.forEach(tag => {
+            const tagName = tag.tagName.getText();
+
+            if (customTags.includes(tagName)) {
+              customComments += `\n * @${tagName} ${tag.comment}`;
+            }
+          });
+        });
+
+        // This is what allows us to map JSDOC comments to ReactWrappers.
+        classDoc["jsDoc"] = node.jsDoc?.map(jsDoc => jsDoc.getFullText()).join("\n");
+
+        const parsed = parse(`${customComments}\n */`);
+
+        if (!parsed.length) return;
+
+        parsed[0].tags?.forEach(t => {
+          if (!Array.isArray(classDoc[t.tag])) {
+            classDoc[t.tag] = [];
+          }
+
+          classDoc[t.tag].push({
+            name: t.name,
+            description: t.description,
+            type: t.type || undefined,
+          });
+        });
+      }
+    },
+  };
+}

cemPlugins/decoratedEventCollector.js

@@ -0,0 +1,95 @@
+/**
+ * @typedef {Object} CommonOptions
+ * @property {import("typescript").TypeChecker} typeChecker
+ */
+import { Resolver } from "./utils/Resolver.js";
+
+/**
+ * @param {CommonOptions} opts
+ * @returns {import('@custom-elements-manifest/analyzer').Plugin}
+ */
+export function decoratedEventCollector(opts) {
+  return {
+    name: "decorated-event-collector",
+    /**
+     * @param {object} params
+     * @param {typeof import("typescript")} params.ts
+     * @param {import('typescript').Node} params.node
+     * @param {import('@custom-elements-manifest/analyzer').AnalyzePhaseParams.moduleDoc} params.moduleDoc
+     */
+    analyzePhase({ ts, node, moduleDoc, context }) {
+      if (ts.isPropertyDeclaration(node) && node.modifiers) {
+        const classDecl = node.parent;
+        const className = classDecl.name?.getText?.();
+        const classDoc = moduleDoc.declarations?.find(
+          d => d.kind === "class" && d.name === className
+        );
+        if (!classDoc) return;
+
+        const decorators = node.modifiers.filter(m => m.kind === ts.SyntaxKind.Decorator);
+        for (const decorator of decorators) {
+          const expr = decorator.expression;
+          const isEventDecorator =
+            ts.isCallExpression(expr) &&
+            ts.isIdentifier(expr.expression) &&
+            expr.expression.getText() === "event";
+
+          if (!isEventDecorator) continue;
+
+          const arg = expr.arguments?.[0];
+          const eventName = ts.isStringLiteral(arg) || ts.isIdentifier(arg) ? arg.text : null;
+          if (!eventName) continue;
+
+          const resolver = new Resolver({
+            ts,
+            typeChecker: opts.typeChecker,
+            classDeclaration: classDecl,
+            context,
+          });
+
+          const [typeText, parsedType] = resolveEventDetailType(resolver, node.type);
+
+          classDoc.events ??= [];
+          classDoc.events.push({
+            name: eventName,
+            type: {
+              text: `CustomEvent<${typeText}>`,
+            },
+            description: resolveDescription(node.jsDoc),
+            parsedType: {
+              text: parsedType,
+            },
+          });
+
+          classDoc.members = (classDoc.members ?? []).filter(m => m.name !== node.name?.getText());
+        }
+      }
+    },
+  };
+}
+
+/**
+ * @param {import("typescript").JSDoc[] | undefined} jsDoc
+ * @return {string | undefined}
+ */
+function resolveDescription(jsDoc) {
+  if (jsDoc?.length) {
+    return jsDoc[0].comment?.toString();
+  }
+  return undefined;
+}
+
+/**
+ * @param {Resolver} resolver
+ * @param {import("typescript").TypeNode} type
+ * @returns {[string, string]}
+ */
+function resolveEventDetailType(resolver, type) {
+  // has generics
+  if (resolver.ts.isTypeReferenceNode(type) && type.typeArguments?.length) {
+    const eventType = type.typeArguments[0];
+    return [eventType.getText(), resolver.resolveTypeNode(eventType)];
+  }
+
+  return [type.getText(), type.getText()];
+}

cemPlugins/generateReactExports.js

@@ -0,0 +1,97 @@
+import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { join as pathJoin } from "node:path";
+import { pascalCase } from "pascal-case";
+import { format } from "prettier";
+import { resolveFilePath } from "./utils/resolveFilePath.js";
+import { resolveParsedType } from "./utils/resolveParsedType.js";
+
+const prettierConfig = JSON.parse(readFileSync(".prettierrc.json", "utf-8"));
+
+/**
+ * @returns {import('@custom-elements-manifest/analyzer').Plugin}
+ */
+export function generateReactExports() {
+  return {
+    name: "generate-react-exports",
+    /**
+     * @param {object} params
+     * @param {import("custom-elements-manifest").Package} params.customElementsManifest
+     */
+    packageLinkPhase({ customElementsManifest }) {
+      const components = customElementsManifest.modules.map(mod => {
+        return [mod.declarations.find(d => d.customElement || !!d.tagName), mod.path];
+      });
+
+      if (!components.length) {
+        throw new Error("Component not found!");
+      }
+
+      const componentsCode = components
+        .map(([el, path]) => resolveComponent(el, path))
+        .filter(c => !!c[0])
+        .join("\n");
+
+      const code = `import React from "react";
+import { createComponent } from "@lit-labs/react";
+
+type Constructor<T> = { new (): T };
+${componentsCode}`;
+
+      const formattedCode = format(code, Object.assign(prettierConfig, { parser: "typescript" }));
+      const outputPath = "./src";
+      mkdirSync(outputPath, { recursive: true });
+      writeFileSync(pathJoin(outputPath, "baklava-react.ts"), formattedCode, { encoding: "utf-8" });
+    },
+  };
+}
+
+/**
+ * @param el {import("custom-elements-manifest").MixinDeclaration}
+ * @param path string
+ * @return string
+ */
+function resolveComponent(el, path) {
+  const resolvedPath = resolveFilePath(path, "default", "./");
+  const { exportCodes, fieldCodes } = resolveEvents(el.events, el.name);
+
+  return `
+export type ${el.name} = ${resolvedPath};
+${exportCodes}
+
+${el.jsDoc || ""}
+export const ${el.name} = React.lazy(() =>
+  customElements.whenDefined("${el.tagName}").then(() => ({
+    default: createComponent({
+      react: React,
+      displayName: "${el.name}",
+      tagName: "${el.tagName}",
+      elementClass: customElements.get("${el.name}") as Constructor<${resolvedPath}>,
+      ${fieldCodes ? `events: {${fieldCodes}}` : ""}
+    })
+  }))
+);`;
+}
+
+/**
+ * @param events {(import("custom-elements-manifest").Event & {parsedType: import("custom-elements-manifest").Type})[] | null}
+ * @param componentName {string}
+ * @return {{exportCodes: string, fieldCodes: string}}
+ */
+function resolveEvents(events, componentName) {
+  if (!events) {
+    return { exportCodes: "", fieldCodes: "" };
+  }
+
+  const exportCodes = [];
+  const fieldCodes = [];
+  for (const event of events) {
+    const pascalCaseEventName = pascalCase(event.name);
+    const exportedEventName = `${componentName}${pascalCaseEventName.replace(/^Bl/, "")}`;
+    const reactEventName = `on${pascalCaseEventName}`;
+    const resolvedEventType = resolveParsedType(event.parsedType.text, "./") ?? "any";
+
+    exportCodes.push(`export type ${exportedEventName} = CustomEvent<${resolvedEventType}>;`);
+  }
+
+  return { exportCodes: exportCodes.join("\n"), fieldCodes: fieldCodes.join("\n,") };
+}