sveld - npm Package Compare versions
Comparing version 0.10.2 to 0.11.0
@@ -13,4 +13,8 @@ # Changelog | ||
| ## [0.10.2](https://github.com/carbon-design-system/sveld/releases/tag/v0.10.) - 2021-08-29 | ||
| ## [0.11.0](https://github.com/carbon-design-system/sveld/releases/tag/v0.11.0) - 2021-12-16 | ||
| - support writing `<!-- @component -->` comments in Svelte components to TypeScript definitions | ||
| ## [0.10.2](https://github.com/carbon-design-system/sveld/releases/tag/v0.10.2) - 2021-08-29 | ||
| - tolerate slot spread syntax (`<slot {...props} />`) when parsing Svelte components | ||
@@ -17,0 +21,0 @@ |
@@ -61,2 +61,3 @@ import * as commentParser from "comment-parser"; | ||
| extends?: Extends; | ||
| componentComment?: string; | ||
| } | ||
@@ -69,2 +70,3 @@ export default class ComponentParser { | ||
| private extends?; | ||
| private componentComment?; | ||
| private readonly reactive_vars; | ||
@@ -71,0 +73,0 @@ private readonly props; |
@@ -163,2 +163,3 @@ "use strict"; | ||
| this["extends"] = undefined; | ||
| this.componentComment = undefined; | ||
| this.reactive_vars.clear(); | ||
@@ -186,3 +187,3 @@ this.props.clear(); | ||
| enter: function (node, parent, prop) { | ||
| var _a, _b, _c, _d, _e, _f, _g, _h; | ||
| var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k; | ||
| if (node.type === "CallExpression") { | ||
@@ -206,3 +207,3 @@ if (node.callee.name === "createEventDispatcher") { | ||
| if (node.type === "ExportNamedDeclaration" && node.declaration != null) { | ||
| var _j = node.declaration.declarations ? node.declaration.declarations[0] : node.declaration, declaration_type = _j.type, id = _j.id, init = _j.init, body = _j.body; | ||
| var _l = node.declaration.declarations ? node.declaration.declarations[0] : node.declaration, declaration_type = _l.type, id = _l.id, init = _l.init, body = _l.body; | ||
| var prop_name = id.name; | ||
@@ -270,4 +271,10 @@ var value = undefined; | ||
| } | ||
| if (node.type === "Comment") { | ||
| var data = (_h = (_g = node === null || node === void 0 ? void 0 : node.data) === null || _g === void 0 ? void 0 : _g.trim()) !== null && _h !== void 0 ? _h : ""; | ||
| if (/^@component/.test(data)) { | ||
| _this.componentComment = data.replace(/^@component/, ""); | ||
| } | ||
| } | ||
| if (node.type === "Slot") { | ||
| var slot_name = (_g = node.attributes.find(function (attr) { return attr.name === "name"; })) === null || _g === void 0 ? void 0 : _g.value[0].data; | ||
| var slot_name = (_j = node.attributes.find(function (attr) { return attr.name === "name"; })) === null || _j === void 0 ? void 0 : _j.value[0].data; | ||
| var slot_props = node.attributes | ||
@@ -309,3 +316,3 @@ .filter(function (attr) { return attr.name !== "name"; }) | ||
| }, {}); | ||
| var fallback = (_h = node.children) === null || _h === void 0 ? void 0 : _h.map(function (_a) { | ||
| var fallback = (_k = node.children) === null || _k === void 0 ? void 0 : _k.map(function (_a) { | ||
| var start = _a.start, end = _a.end; | ||
@@ -395,3 +402,4 @@ return _this.sourceAtPos(start, end); | ||
| rest_props: this.rest_props, | ||
| "extends": this["extends"] | ||
| "extends": this["extends"], | ||
| componentComment: this.componentComment | ||
| }; | ||
@@ -398,0 +406,0 @@ }; |
@@ -151,4 +151,14 @@ "use strict"; | ||
| } | ||
| function genComponentComment(def) { | ||
| if (!def.componentComment) | ||
| return ""; | ||
| if (!/\n/.test(def.componentComment)) | ||
| return "/** " + def.componentComment.trim() + " */"; | ||
| return "/*" + def.componentComment | ||
| .split("\n") | ||
| .map(function (line) { return "* " + line; }) | ||
| .join("\n") + "\n*/"; | ||
| } | ||
| function writeTsDefinition(component) { | ||
| var moduleName = component.moduleName, typedefs = component.typedefs, props = component.props, slots = component.slots, events = component.events, rest_props = component.rest_props, _extends = component["extends"]; | ||
| var moduleName = component.moduleName, typedefs = component.typedefs, props = component.props, slots = component.slots, events = component.events, rest_props = component.rest_props, _extends = component["extends"], componentComment = component.componentComment; | ||
| var _a = genPropDef({ | ||
@@ -160,3 +170,3 @@ moduleName: moduleName, | ||
| }), props_name = _a.props_name, prop_def = _a.prop_def; | ||
| return "\n /// <reference types=\"svelte\" />\n import { SvelteComponentTyped } from \"svelte\";\n " + genImports({ "extends": _extends }) + "\n " + getTypeDefs({ typedefs: typedefs }) + "\n " + prop_def + "\n\n export default class " + (moduleName === "default" ? "" : moduleName) + " extends SvelteComponentTyped<\n " + props_name + ",\n {" + genEventDef({ events: events }) + "},\n {" + genSlotDef({ slots: slots }) + "}\n > {\n " + genAccessors({ props: props }) + "\n }"; | ||
| return "\n /// <reference types=\"svelte\" />\n import { SvelteComponentTyped } from \"svelte\";\n " + genImports({ "extends": _extends }) + "\n " + getTypeDefs({ typedefs: typedefs }) + "\n " + prop_def + "\n " + genComponentComment({ componentComment: componentComment }) + "\n export default class " + (moduleName === "default" ? "" : moduleName) + " extends SvelteComponentTyped<\n " + props_name + ",\n {" + genEventDef({ events: events }) + "},\n {" + genSlotDef({ slots: slots }) + "}\n > {\n " + genAccessors({ props: props }) + "\n }"; | ||
| } | ||
@@ -163,0 +173,0 @@ exports.writeTsDefinition = writeTsDefinition; |
| { | ||
| "name": "sveld", | ||
| "version": "0.10.2", | ||
| "version": "0.11.0", | ||
| "license": "Apache-2.0", | ||
@@ -5,0 +5,0 @@ "description": "Generate TypeScript definitions for your Svelte components.", |
| # sveld | ||
| [![NPM][npm]][npm-url] | ||
| [![Build][build]][build-badge] | ||
|  | ||
|  | ||
@@ -16,3 +17,3 @@ `sveld` generates TypeScript definitions for Svelte components by statically analyzing their props, events, slots and more. Prop types and signatures can be defined using [JSDoc notation](https://jsdoc.app/). This documentation generator can also emit component documentation in Markdown and JSON output formats. | ||
| **Please note** that the generated TypeScript definitions require [Svelte version 3.31](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3300) or greater. | ||
| **Please note** that the generated TypeScript definitions require [Svelte version 3.31](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3310) or greater. | ||
@@ -403,3 +404,3 @@ --- | ||
| ```js | ||
| /** @extends {"./Button"} ButtonProps */ | ||
| /** @extends {"./Button.svelte"} ButtonProps */ | ||
@@ -411,2 +412,34 @@ export const secondary = true; | ||
| ### `@component` comments | ||
| The Svelte Language Server supports component-level comments through the following syntax: `<!-- @component [comment] -->`. | ||
| `sveld` will copy these over to the exported default component in the TypeScript definition. | ||
| Example: | ||
| ```svelte | ||
| <!-- @component | ||
| @example | ||
| <Button> | ||
| Text | ||
| </Button> | ||
| --> | ||
| <button> | ||
| <slot /> | ||
| </button> | ||
| ``` | ||
| Output: | ||
| ```ts | ||
| /** | ||
| * @example | ||
| * <Button> | ||
| * Text | ||
| * </Button> | ||
| */ | ||
| export default class Button extends SvelteComponentTyped<ButtonProps, {}, { default: {} }> {} | ||
| ``` | ||
| ## Contributing | ||
@@ -422,3 +455,1 @@ | ||
| [npm-url]: https://npmjs.com/package/sveld | ||
| [build]: https://img.shields.io/travis/com/ibm/sveld?color=24a148&style=for-the-badge | ||
| [build-badge]: https://travis-ci.com/ibm/sveld |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.63%
111262
- Lines of code
- increased by1.12%
1808
- Number of lines in readme file
- increased by7.36%
452