Support detecting renamed exports as props (#62)

* Support detecting renamed exports as props

* Add a unit test for detecting renamed exports as props

* Format code using prettier

* Add a typecast to appease TypeScript

Co-authored-by: Eric Liu <ericyl.us@gmail.com>

Co-authored-by: Eric Liu <ericyl.us@gmail.com>

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - add isAccessor field to API
 - update Markdown writer to generate a separate table for accessors
+- support props defined via renamed exports (ex: `export { className as class }`)
 
 ## [0.11.1](https://github.com/carbon-design-system/sveld/releases/tag/v0.11.1) - 2021-12-31
 

src/ComponentParser.ts

@@ -3,6 +3,7 @@ import * as commentParser from "comment-parser";
 import { Ast, TemplateNode, Var } from "svelte/types/compiler/interfaces";
 import { getElementByTag } from "./element-tag-map";
 import { Node } from "estree-walker";
+import type { VariableDeclaration } from "estree";
 
 interface CompiledSvelteCode {
   vars: Var[];
@@ -112,6 +113,7 @@ export default class ComponentParser {
   private extends?: Extends;
   private componentComment?: string;
   private readonly reactive_vars: Set<string> = new Set();
+  private readonly vars: Set<VariableDeclaration> = new Set();
   private readonly props: Map<ComponentPropName, ComponentProp> = new Map();
   private readonly slots: Map<ComponentSlotName, ComponentSlot> = new Map();
   private readonly events: Map<ComponentEventName, ComponentEvent> = new Map();
@@ -303,15 +305,37 @@ export default class ComponentParser {
           }
         }
 
-        if (node.type === "ExportNamedDeclaration" && node.declaration != null) {
+        if (node.type === "VariableDeclaration") {
+          this.vars.add(node as unknown as VariableDeclaration);
+        }
+
+        if (node.type === "ExportNamedDeclaration") {
+          // Handle renamed exports
+          let prop_name: string;
+          if (node.declaration == null && node.specifiers[0]?.type === "ExportSpecifier") {
+            const specifier = node.specifiers[0];
+            const localName = specifier.local.name,
+              exportedName = specifier.exported.name;
+            let declaration: VariableDeclaration;
+            // Search through all variable declarations for this variable
+            //  Limitation: the variable must have been declared before the export
+            this.vars.forEach((varDecl) => {
+              if (varDecl.declarations.some((decl) => decl.id.type === "Identifier" && decl.id.name === localName)) {
+                declaration = varDecl;
+              }
+            });
+            node.declaration = declaration!;
+            prop_name = exportedName;
+          }
+
           const {
             type: declaration_type,
             id,
             init,
             body,
           } = node.declaration.declarations ? node.declaration.declarations[0] : node.declaration;
 
-          const prop_name = id.name;
+          prop_name ??= id.name;
 
           let value = undefined;
           let type = undefined;

tests/snapshots/renamed-props/input.svelte

@@ -0,0 +1,10 @@
+<script>
+  let className = "test";
+  /**
+   * Just your average CSS class string.
+   * @type {string|null}
+   */
+  export { className as class };
+</script>
+
+{className}

tests/snapshots/renamed-props/output.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
+
+export interface InputProps {
+  /**
+   * Just your average CSS class string.
+   * @default "test"
+   */
+  class?: string | null;
+}
+
+export default class Input extends SvelteComponentTyped<InputProps, {}, {}> {}

tests/snapshots/renamed-props/output.json

@@ -0,0 +1,18 @@
+{
+  "props": [
+    {
+      "name": "class",
+      "kind": "let",
+      "description": "Just your average CSS class string.",
+      "type": "string|null",
+      "value": "\"test\"",
+      "isFunction": false,
+      "isFunctionDeclaration": false,
+      "constant": false,
+      "reactive": false
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "typedefs": []
+}