To which files should the manifest link. .ts, .js, both, ...

[jogibear9988]

If i have a typescript lib, should the link to ".ts" or ".js" files? I need a link to the .ts files, or I could not use them for my designer. At least I need a info wich runtime file to load.

59 also was a issue about the path (also from me), but a little bit different.

[jogibear9988]

se discussion in slack:

[jogibear9988]

[jogibear9988]

See example of westbrook: https://unpkg.com/browse/@spectrum-web-components/button@0.16.1/custom-elements.json

[jogibear9988]

[Westbrook]

I think this is a great usage question. For instance, I leverage https://www.npmjs.com/package/@custom-elements-manifest/analyzer and point it to my TS files, as they have more types, etc. BUT that means all of the entry files are TS. This works great for reading into API tables, and the like, but it doesn't cover generating components in a JS space. @jogibear9988 makes some great points about how that could benefit cataloging sites via automatic demos rather than relying on the demo field #23, or maybe in concert with it...

This could be corrected as easily as switching globs: ['**/*.ts'], to globs: ['**/*.js'],. But, that might put different pressuring on analysis tools to the benefit of generative tools, and having a solid best practice (whether that's configuration of tools or additional fields or something else) here would be quite nice.

[justinfagnani]

The manifest is intended to tell users and tools how to import and use the components first. That would mean pointing to the actual files that are loaded, which are the .js files. TypeScript files should be referenced in the TypeReference objects.

[jogibear9988]

👍 Maybe we need to write that down somewhere in the manifest. I'll create a pull if this would be okay.

[romanzy313]

I have the same issue... The paths are not resolving correctly. My setup is the following:

I develop in typescript in src folder, and compile to dist with tsc.

I've got a component at src/my-element.ts. If I run custom-elements-manifest analyze --litelement --globs "src/**/*.ts" it produces the correct output except the path and file extension is wrong. Snippet:

{
  "schemaVersion": "1.0.0",
  "readme": "",
  "modules": [
    {
      "kind": "javascript-module",
      "path": "src/my-element.ts", << here should be dist/my-element.js
      "declarations": [
        {
          "kind": "class",
          "description": "An example element.",
          "name": "MyElement",

Now if I instead generate the manifest from src, after transpiling to javascript, I get the following mess:

{
  "schemaVersion": "1.0.0",
  "readme": "",
  "modules": [
    {
      "kind": "javascript-module",
      "path": "dist/custom-elements.json",
      "declarations": [],
      "exports": []
    },
    {
      "kind": "javascript-module",
      "path": "dist/my-element.js",
      "declarations": [
        {
          "kind": "variable",
          "name": "MyElement", decorators messed everything up
          "default": "(function (_super) {\n    __extends(MyElement, _super);\n    function MyElement() {\n        var _this = _super !== null && _super.apply(this, arguments) || this;\n        /**\n         * Copy for the read the docs hint.\n         */\n        _this.docsHint = \"Click on the Vite and Lit logos to learn more\";\n        /**\n         * The number of times the button has been clicked.\n         */\n        _this.count = 0;\n        return _this;\n    }\n    MyElement.prototype.render = function () {\n        return html(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n      <div>\\n        <a href=\\\"https://vitejs.dev\\\" target=\\\"_blank\\\">\\n          <img src=\\\"/vite.svg\\\" class=\\\"logo\\\" alt=\\\"Vite logo\\\" />\\n        </a>\\n        <a href=\\\"https://lit.dev\\\" target=\\\"_blank\\\">\\n          <img src=\", \" class=\\\"logo lit\\\" alt=\\\"Lit logo\\\" />\\n        </a>\\n      </div>\\n      <slot></slot>\\n      <div class=\\\"card\\\">\\n        <button class=\\\"inc_button\\\" @click=\", \" part=\\\"button\\\">\\n          count is \", \"\\n        </button>\\n      </div>\\n      <p class=\\\"read-the-docs\\\">\", \"</p>\\n    \"], [\"\\n      <div>\\n        <a href=\\\"https://vitejs.dev\\\" target=\\\"_blank\\\">\\n          <img src=\\\"/vite.svg\\\" class=\\\"logo\\\" alt=\\\"Vite logo\\\" />\\n        </a>\\n        <a href=\\\"https://lit.dev\\\" target=\\\"_blank\\\">\\n          <img src=\", \" class=\\\"logo lit\\\" alt=\\\"Lit logo\\\" />\\n        </a>\\n      </div>\\n      <slot></slot>\\n      <div class=\\\"card\\\">\\n        <button class=\\\"inc_button\\\" @click=\", \" part=\\\"button\\\">\\n          count is \", \"\\n        </button>\\n      </div>\\n      <p class=\\\"read-the-docs\\\">\", \"</p>\\n    \"])), litLogo, this._onClick, this.count, this.docsHint);\n    };\n    MyElement.prototype._onClick = function () {\n        this.count++;\n    };\n    MyElement.styles = css(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n    :host {\\n      max-width: 1280px;\\n      margin: 0 auto;\\n      padding: 2rem;\\n      text-align: center;\\n    }\\n\\n    .logo {\\n      height: 6em;\\n      padding: 1.5em;\\n      will-change: filter;\\n    }\\n    .logo:hover {\\n      filter: drop-shadow(0 0 2em #646cffaa);\\n    }\\n    .logo.lit:hover {\\n      filter: drop-shadow(0 0 2em #325cffaa);\\n    }\\n\\n    .card {\\n      padding: 2em;\\n    }\\n\\n    .read-the-docs {\\n      color: #888;\\n    }\\n\\n    h1 {\\n      font-size: 3.2em;\\n      line-height: 1.1;\\n    }\\n\\n    a {\\n      font-weight: 500;\\n      color: #646cff;\\n      text-decoration: inherit;\\n    }\\n    a:hover {\\n      color: #535bf2;\\n    }\\n\\n    button {\\n      border-radius: 8px;\\n      border: 1px solid transparent;\\n      padding: 0.6em 1.2em;\\n      font-size: 1em;\\n      font-weight: 500;\\n      font-family: inherit;\\n      background-color: #1a1a1a;\\n      cursor: pointer;\\n      transition: border-color 0.25s;\\n    }\\n    button:hover {\\n      border-color: #646cff;\\n    }\\n    button:focus,\\n    button:focus-visible {\\n      outline: 4px auto -webkit-focus-ring-color;\\n    }\\n\\n    @media (prefers-color-scheme: light) {\\n      a:hover {\\n        color: #747bff;\\n      }\\n      button {\\n        background-color: #f9f9f9;\\n      }\\n    }\\n  \"], [\"\\n    :host {\\n      max-width: 1280px;\\n      margin: 0 auto;\\n      padding: 2rem;\\n      text-align: center;\\n    }\\n\\n    .logo {\\n      height: 6em;\\n      padding: 1.5em;\\n      will-change: filter;\\n    }\\n    .logo:hover {\\n      filter: drop-shadow(0 0 2em #646cffaa);\\n    }\\n    .logo.lit:hover {\\n      filter: drop-shadow(0 0 2em #325cffaa);\\n    }\\n\\n    .card {\\n      padding: 2em;\\n    }\\n\\n    .read-the-docs {\\n      color: #888;\\n    }\\n\\n    h1 {\\n      font-size: 3.2em;\\n      line-height: 1.1;\\n    }\\n\\n    a {\\n      font-weight: 500;\\n      color: #646cff;\\n      text-decoration: inherit;\\n    }\\n    a:hover {\\n      color: #535bf2;\\n    }\\n\\n    button {\\n      border-radius: 8px;\\n      border: 1px solid transparent;\\n      padding: 0.6em 1.2em;\\n      font-size: 1em;\\n      font-weight: 500;\\n      font-family: inherit;\\n      background-color: #1a1a1a;\\n      cursor: pointer;\\n      transition: border-color 0.25s;\\n    }\\n    button:hover {\\n      border-color: #646cff;\\n    }\\n    button:focus,\\n    button:focus-visible {\\n      outline: 4px auto -webkit-focus-ring-color;\\n    }\\n\\n    @media (prefers-color-scheme: light) {\\n      a:hover {\\n        color: #747bff;\\n      }\\n      button {\\n        background-color: #f9f9f9;\\n      }\\n    }\\n  \"])));\n    __decorate([\n        property()\n    ], MyElement.prototype, \"docsHint\");\n    __decorate([\n        property({ type: Number })\n    ], MyElement.prototype, \"count\");\n    MyElement = __decorate([\n        customElement(\"my-element\")\n    ], MyElement);\n    return MyElement;\n}(LitElement))",
          "description": "An example element."
        },
        {
          "kind": "function",
          "name": "MyElement"
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "MyElement",
          "declaration": {
            "name": "MyElement",
            "module": "dist/my-element.js"
          }
        }
      ]
    }
  ]
}

This happens because I use decorators in my lit component definition.

What are my options to fix this issue?

Thanks