Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DCE - add IDE support #27

Open
sashafirsov opened this issue Jan 23, 2024 · 15 comments
Open

DCE - add IDE support #27

sashafirsov opened this issue Jan 23, 2024 · 15 comments

Comments

@sashafirsov
Copy link
Member

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

@sashafirsov
Copy link
Member Author

@sashafirsov
Copy link
Member Author

sashafirsov commented Feb 19, 2024

Current support for IDEs:

Intellij:

VS Code:

LSP

@sashafirsov sashafirsov changed the title add IDE support with WebTypes DCE - add IDE support Feb 19, 2024
@sashafirsov
Copy link
Member Author

sashafirsov commented Feb 19, 2024

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
Copy link
Member Author

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

@sashafirsov
Copy link
Member Author

DCE tags example in VS Code plugin
microsoft/vscode-custom-data#89

@sashafirsov
Copy link
Member Author

DCE imports discussion
w3c/webcomponents-cg#82

@sashafirsov
Copy link
Member Author

sashafirsov commented Feb 25, 2024

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:

  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) 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
Copy link
Member Author

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
Copy link
Member Author

Added comment TSC pre-compilation plugin request:
microsoft/TypeScript#38736 (comment)

@sashafirsov
Copy link
Member Author

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
Copy link
Member Author

@sashafirsov
Copy link
Member Author

sashafirsov commented Mar 7, 2024

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
Copy link
Member Author

sashafirsov commented Mar 8, 2024

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
Copy link
Member Author

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
Copy link
Member Author

Created a repo, design on toolkit notes: #27

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant