DCE and html modules imports

[sashafirsov]

This is a conversation teaser, would be implemented in @epa-wg/custom-element, as TypeScript plugin to render typings and IDE support, as NPM module build target.

Goals

• support imports in DCE with declarative syntax

Provide functional pairing to JS modules imports with import default, particular/list of DCE , DCE tags mapping to local context.

• DCE imports to JS/TS modules

DCE exports compatible with imports by JS/TS code, DCE class as subject for export for further inheritance, use, registering tag, etc.

• CE import from DCE

As DCE works only on markup level, import semantics would be in registering of imported CE class to locally scoped registry.

• IDE syntax / suggestion / docs

When DCE imported as a tag in HTML, it should have full support as a code source with ability to jump to definition, docs on tag and parameters( name, description, def value, doc links ), validation on allowed/prohibited, attributes, attributes value by type.

Syntax

parity with JS import:

• default import

CE JS: import MyElement from "./my-element.js"

DCE from JS: import MyElement from "./my-element.html"

DCE from DCE

<custom-element tag="my-element" src="my-element.html"></custom-element>

CE from DCE

<custom-element tag="my-element" src="./my-element.js"></custom-element>

While JS import always expect the class as resolved module value, the DCE is content-type sensitive. If defined as attribute, it treates as a hint for build transformation. application/javascript would resolve module as CE, others would be treated as DCE DOM sources (SVG, HTML, XSLT,...)

• named import

CE JS: import {Element1, Element2 } from "./my-element.js"

DCE from JS: import {"id-1" as Element1, "id-2" as Element2} from "./my-element.html"

id is used for imported HTML as tag assumes to use registry, while import in JS does not use it.

DCE from DCE

<custom-element tag="element-1" src="my-element.html#id1"></custom-element>
<custom-element tag="element-2" src="my-element.html#id2"></custom-element>

implementation notes

• Typescript import plugin would generate the code to load DCE class without tag registration from HTML file or its part.
• DCE code would load the DOM from URL or DOM part if #id defined.
• IDE support is done by manifest and IDE-specific JSON generation