sveld 0.17.2 → 0.18.1

package/CHANGELOG.md

@@ -10,6 +10,16 @@ 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 -->
 
+## [0.18.1](https://github.com/carbon-design-system/sveld/releases/tag/v0.18.1) - 2023-06-04
+
+- allow `data-*` attributes for props forwarded to HTML elements for `svelte-check@3.x` compatibility
+
+## [0.18.0](https://github.com/carbon-design-system/sveld/releases/tag/v0.18.0) - 2022-10-22
+
+- support `@slot` tag descriptions for named slots
+- support `@event` tag descriptions
+- remove `sveltekit:*` attributes from type definitions
+
 ## [0.17.2](https://github.com/carbon-design-system/sveld/releases/tag/v0.17.2) - 2022-06-13
 
 - handle `export {}` in script block

package/README.md

@@ -354,11 +354,19 @@ export let authors = [];
 
 Use the `@slot` tag for typing component slots. Note that `@slot` is a non-standard JSDoc tag.
 
+Descriptions are optional for named slots. Currently, the default slot cannot have a description.
+
 Signature:
 
 ```js
 /**
- * @slot {Type} [slot name]
+ * @slot {Type} slot-name [slot description]
+ */
+
+Omit the `slot-name` to type the default slot.
+
+/**
+ * @slot {Type}
  */
 ```
 
@@ -368,7 +376,8 @@ Example:
 <script>
   /**
    * @slot {{ prop: number; doubled: number; }}
-   * @slot {{ props: { class?: string; } }} description
+   * @slot {{}} title
+   * @slot {{ prop: number }} body - Customize the paragraph text.
    */
 
   export let prop = 0;
@@ -376,22 +385,25 @@ Example:
 
 <h1>
   <slot {prop} doubled={prop * 2} />
+  <slot name="title" />
 </h1>
 
 <p>
-  <slot name="description" props={{ class: $$props.class }} />
+  <slot name="body" {prop} />
 </p>
 ```
 
 ### `@event`
 
-Use the `@event` tag for typing dispatched events. An event name must be specified.
+Use the `@event` tag to type dispatched events. An event name is required and a description optional.
+
+Use `null` as the value if no event detail is provided.
 
 Signature:
 
 ```js
 /**
- * @event {EventDetail} eventname
+ * @event {EventDetail} eventname [event description]
  */
 ```
 
@@ -400,6 +412,7 @@ Example:
 ```js
 /**
  * @event {{ key: string }} button:key
+ * @event {null} key – Fired when `key` changes.
  */
 
 export let key = "";
@@ -409,6 +422,20 @@ import { createEventDispatcher } from "svelte";
 const dispatch = createEventDispatcher();
 
 $: dispatch("button:key", { key });
+$: if (key) dispatch("key");
+```
+
+Output:
+
+```ts
+export default class Component extends SvelteComponentTyped<
+  ComponentProps,
+  {
+    "button:key": CustomEvent<{ key: string }>;
+    /** Fired when `key` changes. */ key: CustomEvent<null>;
+  },
+  {}
+> {}
 ```
 
 ### `@restProps`

package/lib/ComponentParser.d.ts

@@ -22,6 +22,7 @@ interface ComponentSlot {
     default: boolean;
     fallback?: string;
     slot_props?: string;
+    description?: string;
 }
 interface ForwardedEvent {
     type: "forwarded";
@@ -32,6 +33,7 @@ interface DispatchedEvent {
     type: "dispatched";
     name: string;
     detail?: any;
+    description?: string;
 }
 declare type ComponentEvent = ForwardedEvent | DispatchedEvent;
 interface TypeDef {

package/lib/ComponentParser.js

@@ -120,26 +120,31 @@ var ComponentParser = /** @class */ (function () {
             return "any";
         return type;
     };
-    ComponentParser.prototype.addSlot = function (slot_name, slot_props, slot_fallback) {
+    ComponentParser.prototype.addSlot = function (_a) {
+        var _b;
+        var slot_name = _a.slot_name, slot_props = _a.slot_props, slot_fallback = _a.slot_fallback, slot_description = _a.slot_description;
         var default_slot = slot_name === undefined || slot_name === "";
         var name = default_slot ? DEFAULT_SLOT_NAME : slot_name;
         var fallback = ComponentParser.assignValue(slot_fallback);
         var props = ComponentParser.assignValue(slot_props);
+        var description = (_b = slot_description === null || slot_description === void 0 ? void 0 : slot_description.split("-").pop()) === null || _b === void 0 ? void 0 : _b.trim();
         if (this.slots.has(name)) {
             var existing_slot = this.slots.get(name);
-            this.slots.set(name, __assign(__assign({}, existing_slot), { fallback: fallback, slot_props: existing_slot.slot_props === undefined ? props : existing_slot.slot_props }));
+            this.slots.set(name, __assign(__assign({}, existing_slot), { fallback: fallback, slot_props: existing_slot.slot_props === undefined ? props : existing_slot.slot_props, description: existing_slot.description || description }));
         }
         else {
             this.slots.set(name, {
                 name: name,
                 "default": default_slot,
                 fallback: fallback,
-                slot_props: slot_props
+                slot_props: slot_props,
+                description: description
             });
         }
     };
     ComponentParser.prototype.addDispatchedEvent = function (_a) {
-        var name = _a.name, detail = _a.detail, has_argument = _a.has_argument;
+        var _b;
+        var name = _a.name, detail = _a.detail, has_argument = _a.has_argument, description = _a.description;
         if (name === undefined)
             return;
         /**
@@ -148,15 +153,17 @@ var ComponentParser = /** @class */ (function () {
          * `@event` is not specified.
          */
         var default_detail = !has_argument && !detail ? "null" : ComponentParser.assignValue(detail);
+        var event_description = (_b = description === null || description === void 0 ? void 0 : description.split("-").pop()) === null || _b === void 0 ? void 0 : _b.trim();
         if (this.events.has(name)) {
             var existing_event = this.events.get(name);
-            this.events.set(name, __assign(__assign({}, existing_event), { detail: existing_event.detail === undefined ? default_detail : existing_event.detail }));
+            this.events.set(name, __assign(__assign({}, existing_event), { detail: existing_event.detail === undefined ? default_detail : existing_event.detail, description: existing_event.description || event_description }));
         }
         else {
             this.events.set(name, {
                 type: "dispatched",
                 name: name,
-                detail: default_detail
+                detail: default_detail,
+                description: event_description
             });
         }
     };
@@ -181,10 +188,19 @@ var ComponentParser = /** @class */ (function () {
                         };
                         break;
                     case "slot":
-                        _this.addSlot(name, type);
+                        _this.addSlot({
+                            slot_name: name,
+                            slot_props: type,
+                            slot_description: !!description ? description : undefined
+                        });
                         break;
                     case "event":
-                        _this.addDispatchedEvent({ name: name, detail: type, has_argument: false });
+                        _this.addDispatchedEvent({
+                            name: name,
+                            detail: type,
+                            has_argument: false,
+                            description: !!description ? description : undefined
+                        });
                         break;
                     case "typedef":
                         _this.typedefs.set(name, {
@@ -467,7 +483,11 @@ var ComponentParser = /** @class */ (function () {
                         var start = _a.start, end = _a.end;
                         return _this.sourceAtPos(start, end);
                     }).join("").trim();
-                    _this.addSlot(slot_name, JSON.stringify(slot_props, null, 2), fallback);
+                    _this.addSlot({
+                        slot_name: slot_name,
+                        slot_props: JSON.stringify(slot_props, null, 2),
+                        slot_fallback: fallback
+                    });
                 }
                 if (node.type === "EventHandler" && node.expression == null) {
                     if (!_this.events.has(node.name) && parent !== undefined) {

package/lib/writer/writer-ts-definitions.js

@@ -110,7 +110,7 @@ function addCommentLine(value, returnValue) {
     return "* ".concat(returnValue || value, "\n");
 }
 function genPropDef(def) {
-    var _a, _b, _c;
+    var _a;
     var initial_props = def.props
         .filter(function (prop) { return !prop.isFunctionDeclaration && prop.kind !== "const"; })
         .map(function (prop) {
@@ -132,23 +132,10 @@ function genPropDef(def) {
         var prop_value = prop.constant && !prop.isFunction ? prop.value : prop.type;
         return "\n      ".concat(prop_comments.length > 0 ? "/**\n".concat(prop_comments, "*/") : EMPTY_STR, "\n      ").concat(prop.name).concat(prop.isRequired ? "" : "?", ": ").concat(prop_value, ";");
     });
-    if (((_a = def.rest_props) === null || _a === void 0 ? void 0 : _a.type) === "Element") {
-        var elements = (_b = def.rest_props) === null || _b === void 0 ? void 0 : _b.name.split("|").map(function (element) { return element.replace(/\s+/g, ""); });
-        if (elements.includes("a")) {
-            initial_props.push([
-                "\n",
-                "\n          /**\n           * SvelteKit attribute to enable data prefetching\n           * if a link is hovered over or touched on mobile.\n           * @see https://kit.svelte.dev/docs/a-options#sveltekit-prefetch\n           * @default false\n           */\n           \"sveltekit:prefetch\"?: boolean;\n          ",
-                "\n",
-                "\n          /**\n           * SvelteKit attribute to trigger a full page\n           * reload after the link is clicked.\n           * @see https://kit.svelte.dev/docs/a-options#sveltekit-reload\n           * @default false\n           */\n           \"sveltekit:reload\"?: boolean;\n          ",
-                "\n",
-                "\n          /**\n           * SvelteKit attribute to prevent scrolling\n           * after the link is clicked.\n           * @see https://kit.svelte.dev/docs/a-options#sveltekit-noscroll\n           * @default false\n           */\n           \"sveltekit:noscroll\"?: boolean;\n          ",
-            ].join("\n"));
-        }
-    }
     var props = initial_props.join("\n");
     var props_name = "".concat(def.moduleName, "Props");
     var prop_def = EMPTY_STR;
-    if (((_c = def.rest_props) === null || _c === void 0 ? void 0 : _c.type) === "Element") {
+    if (((_a = def.rest_props) === null || _a === void 0 ? void 0 : _a.type) === "Element") {
         var extend_tag_map = def.rest_props.name
             .split("|")
             .map(function (name) {
@@ -159,7 +146,12 @@ function genPropDef(def) {
             return "svelte.JSX.HTMLAttributes<HTMLElementTagNameMap[\"".concat(element, "\"]>");
         })
             .join(",");
-        prop_def = "\n    export interface ".concat(props_name, " extends ").concat(def["extends"] !== undefined ? "".concat(def["extends"].interface, ", ") : "").concat(extend_tag_map, " {\n      ").concat(props, "\n    }\n  ");
+        /**
+         * Components that extend HTML elements should allow for `data-*` attributes.
+         * @see https://github.com/sveltejs/language-tools/issues/1825
+         */
+        var dataAttributes = "[key: `data-${string}`]: any;";
+        prop_def = "\n    export interface ".concat(props_name, " extends ").concat(def["extends"] !== undefined ? "".concat(def["extends"].interface, ", ") : "").concat(extend_tag_map, " {\n      ").concat(props, "\n      \n      ").concat(dataAttributes, "\n    }\n  ");
     }
     else {
         prop_def = "\n    export interface ".concat(props_name, " ").concat(def["extends"] !== undefined ? "extends ".concat(def["extends"].interface) : "", " {\n      ").concat(props, "\n    }\n  ");
@@ -174,7 +166,8 @@ function genSlotDef(def) {
         .map(function (_a) {
         var name = _a.name, slot_props = _a.slot_props, rest = __rest(_a, ["name", "slot_props"]);
         var key = rest["default"] ? "default" : clampKey(name);
-        return "".concat(clampKey(key), ": ").concat(formatTsProps(slot_props), ";");
+        var description = rest.description ? "/** " + rest.description + " */\n" : "";
+        return "".concat(description).concat(clampKey(key), ": ").concat(formatTsProps(slot_props), ";");
     })
         .join("\n");
 }
@@ -193,9 +186,13 @@ function genEventDef(def) {
     };
     return def.events
         .map(function (event) {
-        return "".concat(clampKey(event.name), ": ").concat(event.type === "dispatched" ? createDispatchedEvent(event.detail) : "".concat(mapEvent(event.name), "[\"").concat(event.name, "\"]"), ";");
+        var description = "";
+        if (event.type === "dispatched" && event.description) {
+            description = "/** " + event.description + " */\n";
+        }
+        return "".concat(description).concat(clampKey(event.name), ": ").concat(event.type === "dispatched" ? createDispatchedEvent(event.detail) : "".concat(mapEvent(event.name), "[\"").concat(event.name, "\"]"), ";\n");
     })
-        .join("\n");
+        .join("");
 }
 function genAccessors(def) {
     return def.props

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveld",
-  "version": "0.17.2",
+  "version": "0.18.1",
   "license": "Apache-2.0",
   "description": "Generate TypeScript definitions for your Svelte components.",
   "main": "./lib/index.js",
@@ -9,7 +9,7 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "test:unit": "vitest",
+    "test:unit": "vitest -r tests",
     "test:snapshot": "node tests/test-snapshot",
     "test:integration": "node tests/test-integration",
     "format": "prettier --write \"{src,tests}/**/*.{js,ts,svelte,md}\"",
@@ -17,27 +17,27 @@
   },
   "dependencies": {
     "@rollup/plugin-node-resolve": "^13.2.1",
-    "acorn": "^8.7.0",
+    "acorn": "^8.8.0",
     "comment-parser": "^1.3.1",
-    "fast-glob": "^3.2.11",
+    "fast-glob": "^3.2.12",
     "prettier": "^2.6.2",
     "rollup": "^2.70.2",
     "rollup-plugin-svelte": "^7.1.0",
-    "svelte": "^3.47.0",
+    "svelte": "^3.52.0",
     "svelte-preprocess": "^4.10.6",
-    "typescript": "^4.6.3"
+    "typescript": "^4.8.4"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "1.0.0-next.41",
-    "@types/node": "^17.0.25",
-    "@types/prettier": "^2.6.0",
-    "carbon-components-svelte": "^0.63.1",
-    "carbon-preprocess-svelte": "^0.9.0",
-    "codemirror": "^5.65.3",
-    "prettier-plugin-svelte": "^2.7.0",
-    "svelte-highlight": "^6.0.1",
-    "vite": "^2.9.5",
-    "vitest": "^0.9.4"
+    "@sveltejs/vite-plugin-svelte": "1.0.9",
+    "@types/node": "^18.11.0",
+    "@types/prettier": "^2.7.1",
+    "carbon-components-svelte": "^0.70.12",
+    "carbon-preprocess-svelte": "^0.9.1",
+    "codemirror": "5.65.5",
+    "prettier-plugin-svelte": "^2.8.0",
+    "svelte-highlight": "^6.2.1",
+    "vite": "^3.1.8",
+    "vitest": "^0.24.3"
   },
   "bin": {
     "sveld": "./cli.js"