DCE - add IDE support

[sashafirsov]

https://github.com/JetBrains/web-types

[sashafirsov]

JetBrains:

• Extension Points
• Editing HTML
• How to extend the syntax of html plugins?
• Platform Blog

VS Code

• Web Extensions
• vs code plugin development

[sashafirsov]

Current support for IDEs:

• classic HTML5 validator, used by IntelliJ for html code: https://github.com/validator/validator (intelliJ only?)

• custom-elements-language-server ( no IntelliJ support yet ) by @Matsuuu

• webcomponents / custom-elements-manifest

• break-stuff / cem-tools

Intellij:

• Support Custom Web Components
• web-types.json

VS Code:

• html-validate.org

LSP

• Language Server Protocol - Wikipedia
• IntelliJ LSP
• vscode-html-languageserver

[sashafirsov]

Phil Fearon 6 hours ago For VS Code, a JSON schema or XML Schema as a base would suffice. Currently, the XSLT/XPath extension for VS Code uses TypeScript (transformed from the XML Schema using XSLT) for linting and auto-completion for XSLT.

XSLT/XPath for Visual Studio Code

[sashafirsov]

VS Code Custom Data allows to enhance VS Code's understanding of new HTML tags, attributes and attribute values.

[sashafirsov]

DCE tags example in VS Code plugin https://github.com/microsoft/vscode-custom-data/issues/89

[sashafirsov]

DCE imports discussion https://github.com/w3c/webcomponents-cg/issues/82

[sashafirsov]

TypeScript Language Service Plugin

Writing a Language Service Plugin

tsconfig.json compilerOptions plugins example todo plugin

ChatGPT advise

Creating a **TSServer plugin** to handle imports of files with the `.xhtml` extension involves extending TypeScript's language services. While I cannot directly create a plugin for you, I can guide you through the process and provide some general steps: 1. **Understand TSServer**: - The TypeScript standalone server (tsserver) is a Node.js executable that encapsulates the TypeScript compiler and language services. [It exposes these services through a JSON protocol](https://github.com/microsoft/TypeScript/wiki/Standalone-Server-%28tsserver%29)². - TSServer is well-suited for editors and IDE support. 2. **Create a Custom Language Service Plugin**: - You'll need to create a custom plugin that hooks into TSServer's language services. - Your plugin should handle `.xhtml` file imports by providing type information, completions, and other language features. 3. **Implement the Plugin**: - Start by creating a new Node.js project. - Install the necessary dependencies, including TypeScript and any other tools you might need. - Implement your custom logic for handling `.xhtml` files. - You'll need to: - Parse `.xhtml` files. - Extract relevant information (e.g., types, symbols, references). - Integrate this information into TSServer's language services. 4. **Register Your Plugin with TSServer**: - In your plugin code, register your custom language service with TSServer. - You'll need to communicate with TSServer using the JSON protocol. 5. **Test Your Plugin**: - Set up a test environment where you can run TSServer with your custom plugin. - Verify that your `.xhtml` file imports are correctly handled by TSServer. 6. **Integrate with Your Editor or IDE**: - Depending on your editor or IDE, you'll need to configure it to use your custom TSServer plugin. - Ensure that your `.xhtml` files are recognized and that the language features work as expected. Remember that creating a TSServer plugin involves diving into TypeScript's internals and understanding how the language services work. You'll need to explore the TypeScript source code and documentation to implement your custom logic effectively. For more detailed guidance, refer to the TypeScript wiki on creating custom language service plugins². Good luck with your project! 🚀🔌 Source: Conversation with Bing, 2/25/2024 ([1](https://github.com/microsoft/TypeScript/wiki/Standalone-Server-%28tsserver%29)) Standalone Server (tsserver) · microsoft/TypeScript Wiki · GitHub. https://github.com/microsoft/TypeScript/wiki/Standalone-Server-%28tsserver%29. (2) coc-tsserver - npm. https://www.npmjs.com/package/coc-tsserver?activeTab=readme. (3) javascript - Appending .js extension on relative import statements .... https://stackoverflow.com/questions/626[1](https://github.com/microsoft/TypeScript/wiki/Standalone-Server-%28tsserver%29)9058/appending-js-extension-on-relative-import-statements-during-typescript-compilat.

[sashafirsov]

Based on example todo plugin plan

• create plugin
• in proxy.getSemanticDiagnostics = (filename) => {}
• extract the DCE definitions from file

Generation has to check the filename data and target generated file. Only outdated should be re-rendered unless --force flag set.

• generate filename.dce.ts with DCE load and JSDoc for manifest extraction

• generate filename.dce.d.js

• generate IntelliJ and VSCode CE JSON definitions

• in parsed DOM, check whether DCE instances use declared props or HTMLElement common attributes. Generate error for unknown

• DCE instance attributes values to be checked against permitted patterns. Generate error

• Generated TS file name to be passed to original TS for compilation/validation.

• TS and own errors mix returned

[sashafirsov]

Added comment TSC pre-compilation plugin request: https://github.com/microsoft/TypeScript/issues/38736#issuecomment-1982216307

[sashafirsov]

Phil Fearon

For VS Code, a JSON schema or XML Schema as a base would suffice. Currently, the XSLT/XPath extension for VS Code uses TypeScript (transformed from the XML Schema using XSLT) for linting and auto-completion for XSLT.

[sashafirsov]

Validating web content files | IntelliJ IDEA Documentation

[sashafirsov]

generated on fly XSD idea intelliJ

<root   xmlns="http://www.example.org"

    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://www.example.org">

the schema would be (re-)generated for the page on fly and serve tags on the top level. Plugin should watch for file changes, update schema, reload it lazily letting the XML check to validate and apply suggestions.

FS watch: chokidar - used by VS Code

[sashafirsov]

In combination with chokidar the lint is the primary HTML validation tool. From reddit thread

Traditionally you use SGML which is what the W3C validator service at https://validator.w3.org/ is using. For HTML5+, you can use my W3C HTML 5.1 DTD at http://sgmljs.net/docs/w3c-html51-dtd.html (site isn't updated yet for HTML 5.2) and use it with any SGML software such as OpenSP which is used by the W3C validator as well.

You may also have luck using the experimental nu validator (also linked from W3C's validator page), though I'm not sure it's still being maintained, or what coverage it represents relative to the web test suite at https://github.com/web-platform-tests.

Nu Html Checker is Java jar/war . Hence OK for IntelliJ but requires either executable or java runtime for other editors.

HtmlInputStreamReader.java is converted into C for FireFox. Which has a potential for compiling into WASM.

Alternative is to use GWT Java to JS compiler

The HTML5 Live DOM Viewer—in Browser has the converted JS. Perhaps outdated.

[sashafirsov]

caja/src/com/google/caja/plugin /html-emitter.js has an outdated yet JS implementation.

j2cl gives WASM implementation for Nu Html Checker java code. As the last is not extendable, would need to clone the repo and use HTML2HTML utility CC: @jasvir

[sashafirsov]

Created a repo, design on toolkit notes: https://github.com/EPA-WG/custom-element/issues/27