open-wc / custom-elements-manifest

Custom Elements Manifest is a file format that describes custom elements in your project.

Home Page:https://custom-elements-manifest.open-wc.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Failed to resolve dependency

kaifaty opened this issue · comments

Checklist

  • [+] Did you run the analyzer with the --dev flag to get more information?
  • [-] Did you create a minimal reproduction in the playground?

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"
          }
        }
      ]
    }
  ]
}

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.