open-wc / custom-elements-manifest

Custom Elements Manifest is a file format that describes custom elements in your project.
https://custom-elements-manifest.open-wc.org/
234 stars 43 forks source link

Failed to resolve dependency #199

Open kaifaty opened 1 year ago

kaifaty commented 1 year ago

Checklist

CEM can't resolve dependencies.

Failed to resolve dependency "./styles".
[COLLECT PHASE]:  src/temp/component.ts
[ANALYZE PHASE]:  src/temp/component.ts
[MODULE LINK PHASE]:  src/temp/component.ts

component.ts

import {styles} from './styles'

const template = document.createElement('template')
template.innerHTML = `<style>${styles}</style<div>content</div>`
export class TempComponent extends HTMLElement {
  _value: string = ''
  get value() {
    return this._value
  }
  set value(v: string) {
    this._value = v
  }
  constructor() {
    super()
    this.attachShadow({mode: 'open'})
    this.shadowRoot.append(template.content.cloneNode(true))
  }
}

styles.ts

const css = (v: string[] | ArrayLike<string>, ...vals: string[]) => String.raw({raw: v}, ...vals)

export const styles = css`
  :host {
    background: var(--background-color);
  }
`

cem.config.mjs


export default {
  /** Globs to analyze */
  globs: [
    './src/temp/component.ts',
  ],
  outdir: './',
  /** Run in watch mode, runs on file changes */
  /** Include third party custom elements manifests */
  dependencies: true,
  /** Output CEM path to `package.json`, defaults to true */
  packagejson: true,

}

custom-elements.json

{
  "schemaVersion": "1.0.0",
  "readme": "",
  "modules": [
    {
      "kind": "javascript-module",
      "path": "src/temp/component.ts",
      "declarations": [
        {
          "kind": "class",
          "description": "",
          "name": "TempComponent",
          "members": [
            {
              "kind": "field",
              "name": "_value",
              "type": {
                "text": "string"
              },
              "default": "''"
            },
            {
              "kind": "field",
              "name": "value"
            }
          ],
          "superclass": {
            "name": "HTMLElement"
          },
          "customElement": true
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "TempComponent",
          "declaration": {
            "name": "TempComponent",
            "module": "src/temp/component.ts"
          }
        }
      ]
    }
  ]
}
thepassle commented 1 year ago

When using dependencies: true the analyzer crawls your module graph to find any third party dependencies to figure out where third party CEM's may be located. It should skip crawling local files though, because they'll already be crawled anyway. We should add a check in find-dependencies next to the builtin modules check to see if the imported file is a bare module specifier.

This shouldn't affect analysis of your CEM, however, the styles file and contents should still be included in your CEM. I checked and verified this locally.

r1m commented 10 months ago

Is there a way to disable those messages ?