Coder Social home page Coder Social logo

language-server's Introduction

Marko Language Support

Using the Language Server Protocol to improve Marko's developer experience. Server implementation can be found here.

image

How to use

VS Code

Emacs

Neovim

IntelliJ/Webstorm

Sublime

  • run Package Control: Install Package from the command palette, then select LSP
  • npm i -g @marko/language-server
  • run LSP: Enable Language Server from the command palette and register marko-language-server.

Atom

Development

We include a .vscode directory that contains launch configurations for developers. You can find three settings that will help you get started. The workflow will be explained in the following items:

  • Run $ npm install installs dependencies for the extension and the server.
  • Run $ npm run watch to compile and re-compile the client and server in the background on each change.
  • Open this folder in VS Code. In the Debug viewlet, run the 'All' task, this will open a new vscode instance and attach debuggers for the client and server code.
  • Open your Marko project (You can use https://github.com/marko-js-samples/ui-components-playground to experiment as well)
  • Now you can add breakpoints to the client and the server. If you change any code, you might want to restart the debug session so that all your changes get loaded.

Contributing

Each project in this repository has different guidelines for contributing. Please check the CONTRIBUTING.md file in each project to learn more.

Code of Conduct

This project adheres to the eBay Code of Conduct. By participating in this project you agree to abide by its terms.

License

Use of this source code is governed by an MIT-style license that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

Contributors

  • Diego Berrocal (@CestDiego)
  • Manthan Doshi

language-server's People

Contributors

agliga avatar dylanpiercey avatar github-actions[bot] avatar lulavalva avatar manthan-d avatar mlrawlings avatar prashantashok avatar svallory avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

language-server's Issues

axe-core: current solution for dynamic values produces false positives

[email protected]

Details

As of now, extracted HTML replaces all complex attribute expressions with strings which begin with "dynamic". This is insufficient, as it produces false positives in some cases which weren't considered.

Failure Case

<div role='option' aria-selected=isSelected && "true" />

Fix all of the following:
    Invalid ARIA attribute value: aria-selected="dynamic0"

Constraints for Solution

  1. Replacing these expressions with some truthy string is necessary, otherwise dynamic required attributes like
    <img src="..." alt=dynamic + string />
    would create an error state.
  2. Non-unique strings like true are also not an option, because then rules like duplicate-id-active and landmark-unique would break in cases like this:
    <div id=first + dynamic />
    <div id=second + dynamic />

Possible solutions

  1. Special case string replacement based on attribute name
    • This can get very messy very quickly, I don't think it's a viable solution
  2. Blacklist rules like duplicate-id-active, and set all dynamic values to a unique string that works everywhere like "true"
    • Untested, I'm not sure if "true" will pass every rule

Right now option 2 seems the most viable, but I would like to give it more thought as well.

Crash on startup

@marko/[email protected]

Details

I'm trying to use the language server in neovim.

Expected Behavior

On the CLI: marko-language-server --stdio does not crash

Actual Behavior

It crashes within a few seconds of starting up with:

% marko-language-server --stdio
/Users/voon.wong/.asdf/installs/nodejs/18.13.0/lib/node_modules/@marko/language-server/node_modules/@marko/language-tools/dist/index.js:2937
var import_strip_json_comments = __toESM(require("strip-json-comments"));
                                         ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/voon.wong/.asdf/installs/nodejs/18.13.0/lib/node_modules/@marko/language-server/node_modules/strip-json-comments/index.js from /Users/voon.wong/.asdf/installs/nodejs/18.13.0/lib/node_modules/@marko/language-server/node_modules/@marko/language-tools/dist/index.js not supported.
Instead change the require of /Users/voon.wong/.asdf/installs/nodejs/18.13.0/lib/node_modules/@marko/language-server/node_modules/strip-json-comments/index.js in /Users/voon.wong/.asdf/installs/nodejs/18.13.0/lib/node_modules/@marko/language-server/node_modules/@marko/language-tools/dist/index.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/voon.wong/.asdf/installs/nodejs/18.13.0/lib/node_modules/@marko/language-server/node_modules/@marko/language-tools/dist/index.js:2937:42)
    at Object.<anonymous> (/Users/voon.wong/.asdf/installs/nodejs/18.13.0/lib/node_modules/@marko/language-server/dist/index.js:28:31)
    at Object.<anonymous> (/Users/voon.wong/.asdf/installs/nodejs/18.13.0/lib/node_modules/@marko/language-server/bin.js:2:1) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v18.13.0

Possible Fix

Introduction of strip-json-comments in 3b0262e#diff-1238398146196c4e652a4d775b225e4740198f2e59a0d4e1db9be9df69a05af0R20 seems to have broken it.

Downgrading to 1.0.6 works, but any version from 1.0.7 onwards, including up to the current version of 1.0.17 causes this crash.

Your Environment

Node.js 18.13.0, Mac OS 13.4

Incorrect Typescript generation on Tags API Preview with return values

@marko/[email protected] and above

Details

When using the Tags API Preview (0.7.2), return values of HTML elements cause type exceptions.

For example,

<!-- use tags -->
<div/foo/>

Causes the following error when running mtc

Property 'value' does not exist on type '() => HTMLDivElement'.

Expected Behavior

No Typescript errors are raised.

Actual Behavior

Typescript errors prevent CI from passing. Pinning to @marko/[email protected] works for now with no changes to the code.

Your Environment

Mac OS 13.6.3
NodeJS 20.10.0

Non-zero exit code when there are no type errors

@marko/[email protected]

Details

Incorrect exit code causes CI to fail. With no code changes, previous version returned exit code zero, but new 1.0.0 version returns exit code 1.

Expected Behavior

Same as @marko/[email protected]: when there are type errors, process should exit with non-zero exit code. When there are no type errors, process should exit with zero exit code.

Actual Behavior

Process exits with code 1, even when code passes typecheck - confirmed with @marko/[email protected]

Your Environment

NodeJS 18.18.0, Mac OS 13.6

VSCode IntelliSense does not load/work anymore

[email protected]

Details

With version 1.0.10 of the marko VSCode extension installed, the JS/TS language service does not work anymore.

This is the error I see on VSCode:

The JS/TS language service immediately crashed 5 times. The service will not be restarted. This may be caused by a plugin contributed by one of these extensions: Marko-JS.marko-vscode, VisualStudioExptTeam.vscodeintellicode, VisualStudioExptTeam.vscodeintellicode.

And from the output console:

2023-04-06 09:24:26.855 [error] Error: <semantic> TypeScript Server Error (5.0.3)
Cannot read properties of undefined (reading 'resolutions')
TypeError: Cannot read properties of undefined (reading 'resolutions')

Downgrading to 1.0.9 the JS/TS language service works fine again.
Not sure this is something with the marko VSCode extension of with VSCode itself though.

Your Environment

  • VSCode Version: 1.77.1
  • Commit: b7886d7461186a5eac768481578c1d7ca80e2d21
  • Date: 2023-04-04T23:22:38.708Z
  • Electron: 19.1.11
  • Chromium: 102.0.5005.196
  • Node.js: 16.14.2
  • V8: 10.2.154.26-electron.0
  • OS: Darwin arm64 22.4.0
  • Sandboxed: No

Type-checking broken for `<await>`

@marko/[email protected]

Also occurs in 0.0.14, 0.0.15

Details

Trying to type check a repository that uses <await>

Expected Behavior

Expect <@then> to be typed correctly

Actual Behavior

Types lost in <@then>

Possible Fix

See c71eacf#comments

It looks like the <await> tag isn't emitted, and therefore excluded from typechecking

Definitions returned include empty directories

Problem:

When ctrl+clicking a custom component tag in VS Code, the definitions panel shows one extra entry:

  • If the component is in the components directory alongside the component currently open, it also shows the path of the directory
    Screenshot from 2019-05-12 01-43-14
  • If the component is available through a marko.json file, the json file is also shown

The second one could be intentional, so that user is aware which file is making it available, but I think both shouldn't be shown.

Suggestion:

I did some experiment with a fork some while back and seemed to have fixed it here: rohit-gohri@f2ff50a, by adding a fs.stat and checked if result.isFile is true.

That branch has too many changes. I could open a new PR with just that single change if that looks good?

Also it's great that this got released.

Marko Plugin is crashing the Typescript language service

[email protected]

Opening any TypeScript file causes the language service to crash with the error message:

The JS/TS language service immediately crashed 5 times. The service will not be restarted. This may be caused by a plugin contributed by one of these extensions: Marko-JS.marko-vscode. Please try disabling these extensions before filing an issue against VS Code.

I haven't been able to reproduce this in a smaller shareable project yet, but I'll update this description when I have.

Stacktrace

2023-11-23 13:56:01.342 [error] Error: TypeScript Server Error (5.2.2)
Cannot read properties of undefined (reading 'resolutions')
TypeError: Cannot read properties of undefined (reading 'resolutions')

Workaround

Downgrading to 1.0.19 solves the problem. 1.0.20 and above crash.

Your Environment

The project is a pnpm monorepo, which may be related...

  • Windows.
  • VSCode 1.84.2.
  • TypeScript 5.2.2.
  • pnpm (using node-linker=hoisted).
  • Node 18.

Related Issues

This looks like the same issue as #155.

static keyword interferes with autocomplete

Package Version: v0.10.6

Declare a static const variable in a marko file. Intellisense, autocomplete, go to definition nothing works anymore.

e.g.
index.marko

static const isBrowser = typeof window !== "undefined";

Tag parameter type annotation breaks syntax highlighting

[email protected]

Details

Adding type annotation, specifically a :, to a tag parameter causes syntax highlighting to be incorrect from that point.

Expected Behavior

Syntax highlighting should not be affected outside of the type annotation.

Actual Behavior

Syntax highlighting is broken.

Steps to Reproduce

  1. Add component with tag parameters (eg for) along with some additional markup
<div class="before">Before</div>
<for|item| of=['']>
  <div class="within">Within</div>
</for>
<div class="after">After</div>
  1. Add type annotation to attribute
<div class="before">Before</div>
<for|item: string| of=['']>
  <div class="within">Within</div>
</for>
<div class="after">After</div>
  1. Notice syntax highlighting is no longer correct following the type annotation.

Before:
image

After:
image

Commenting in concise gives error in vs code

Details

Commenting in the concise part of code gives error in VS Code v1.52.1

Marko VSCode v0.10.0
VS Code v1.52.1
Win 10

Steps to Reproduce

component.marko

div
	p -- paragraph
	//
	// add a comment below this line and vs throws error
	//
	ul -- list
		li -- list item

class {
	onMount() {
		//
		// add a comment here - no errors
		//
		
	}
}

Stack Trace

[Error - 21:26:31] Request textDocument/completion failed.
Message: Request textDocument/completion failed with message: Illegal state. Invalid tag name
Code: -32603

Blank lines before </body> and </head>?

[email protected]

Details

On a clean install of Marko basic, I ran the Marko VSCode plugin and I'm getting some unexpected spacing after certain tags.

Expected Behavior

I'd assume that there wouldn't be blank returns before the , tags.

Actual Behavior

image

Your Environment

  • VS Code Insiders 1.57.0-insider
  • Windows 10 build 21H1
  • Link to your project:

Steps to Reproduce

  1. npx @marko/create
  2. Run the basic build
  3. Install Marko VSCode plugin
  4. Open the app-layout.marko file and run the formatter

Autocomplete not working for a component

[email protected]

Details

When using ebay-textbox and trying to add the properties of it, the autocomplete doesn't work and VSCode logs the following error in the Marko Language Server output window.

[Error - 3:44:50 PM] Request textDocument/completion failed.
  Message: Request textDocument/completion failed with message: Cannot read property 'type' of undefined
  Code: -32603 
<ebay-textbox
  class=input.class
  fluid
  value=input.value/>

I can see the ebay-textbox has the marko-tag.json file https://github.com/eBay/ebayui-core/blob/6.0.0/src/components/ebay-textbox/marko-tag.json

Expected Behavior

This should mimic e.g. what ebay-checkbox does

Screen Shot 2020-09-02 at 3 50 08 PM

3 bugs with the tags api

VS Code

From the VS Code extension marko-js.marko-vscode with the version released on 5/13/2022, 15:43:22.

Details

When using concise mode, the new tags api, and VS Code, there are three intellesense errors for the following code:

Screen Shot 2022-06-11 at 1 50 41 PM

  1. Curly braces for codeblocks spanning multiple lines appear invalid (in my color scheme, invalid brackets are colored red). Here, this can be seen in the brackets for attrs and onClick.
  2. Having a default value for an attribute creates the error "Invalid shorthand property initializer".
  3. If you remove greeting = "Hello", from the above snippet, let has the following error: "Unexpected token".

Raw code snippet:

attrs/{
    greeting = "Hello",
    firstName,
    lastName,
    helloWorld,
    anotherItem,
    ...otherAttrs
}

let/count=0
button onClick() {
    count++
    console.log("hello")
}
    -- ${count}

Expected Behavior

This is all valid syntax for the tags api and therefore should not produce any errors.

Additional Info

Your Environment

  • Environment name and version: Node v18.1.0
  • Operating System and version (desktop or mobile): macOS 12.4.0

Relevant dependencies in package.json:

"@marko/compiler": "^5.21.4",
"@marko/tags-api-preview": "^0.5.3",
"@marko/translator-default": "^5.21.2",
"@marko/vite": "^2.3.2",
"prettier": "^2.6.2",
"prettier-plugin-marko": "^1.2.1",

Steps to Reproduce

  1. Install the VS Code plugin
  2. Create an index.marko file
  3. Copy-paste the above contents into that marko file.
  4. See the errors

Using placeholders in <style> tags reports errors

Marko VSCode Plugin 1.0.8

Details

Using placeholders in <style> tags reports errors.

Dynamic placeholders in <style> tags are only allowed when not using the Tags API, so maybe this is something we're willing to live with for now.

Expected Behavior

<style> tags support placeholders when not using the new tags API and so should not cause errors. This code block should not cause errors in the tooling because it's valid (at least according to the docs) and works:

import largeCover from "../images/cover-1920.png"
<style>
  #hero-banner {
        background-image: url(${largeCover});
    }
</style>

Actual Behavior

It reports missing semi-colons.

image

Your Environment

VSCode: 1.76.2

Provide VS Code documentation for style linting

When viewing CSS rules in style.less {} in *.marko components in VS Code, I would like to see Stylelint warnings and NOT see duplicate warnings from the Marko extension.

I have figured out how to get:

  • TailwindCSS providing class name suggestions inside of *.marko files in the <html></html> section
  • Stylelint and TailwindCSS working in *.less files
  • Stylelint working with postcss-html custom syntax in *.marko files if I use <style></style> instead of style {}

In the following, I can get a Stylelint warning to show, but cannot figure out how to suppress the duplicate style warning from Marko, from appearing:

<style>
i {
}
</style>

It would be ideal to be able to write the following and see a Stylelint error in VS Code with no duplicate warning from Marko:

style.less {
  i {
  }
}

Please consider supporting that functionality and documenting it.

Extension logs errors when it can't find component

When hovering over some attribute value or the if tag the extension opens the output window in VS Code and logs some errors:

[Error - 1:49:16 AM] Request textDocument/definition failed.
  Message: Request textDocument/definition failed with message: EISDIR: illegal operation on a directory, read
  Code: -32603 
[Error - 1:49:18 AM] Request textDocument/definition failed.
  Message: Request textDocument/definition failed with message: Couldn't match the scopeType: 3
  Code: -32603 
[Error - 1:49:19 AM] Request textDocument/definition failed.
  Message: Request textDocument/definition failed with message: Couldn't find a definition for tag: if
  Code: -32603 

I think #6 covered all console statements, but this throw new Error in https://github.com/marko-js/marko-language-server/blob/1fdedd9e1dc536d36234354f2f45a894418cabd5/server/src/service.ts#L379-L388 directly opens the output window in VS code and some other cases are throwing too.

Seems like the only way to handle this would be add try catches everywhere as there is no global error handler: microsoft/vscode#45264

Dynamic tag `Marko.Body<[{ foo: bar }]>` is inconsistent between params and args

@marko/[email protected]

Details

The following should be equivalent:

<${input.renderBody} foo=bar />
<${input.renderBody}({ foo: bar }) />

But they aren't. It looks like Marko.Body<{ foo: bar }> expects Directives & { value: [{ foo: bar; }]; }, which may have been carried over from when the syntax for dynamic tag params was going to be <${input.renderBody}=[{ foo: bar}] />. This should probably be updated.

Steps to Reproduce

Example template:

export interface Input {
  renderBody: Marko.Body<[{ foo: string }]>;
}

<${input.renderBody} foo="bar" />
<${input.renderBody}({ foo: "bar" }) />

Marko VSCode Extension: Unexpected comma at the end of condition block

Marko VSCode 1.0.16

Details

I'm working on a component.
I have a thisPerson variable that has all props being optional props. I want to check if they're all "defined" before passing to a <person-card> tag.

When saving the file, the extension format the <if> tag like this and insert a comma at the end of the condition:

- <if(thisPerson.address && thisPerson.phone && thisPerson.age && thisPerson.nationality)>
+ <if(
+   thisPerson.address &&
+   thisPerson.phone &&
+   thisPerson.age &&
+   thisPerson.nationality, <!-- -----------------NOTICE THIS COMMA HERE! -->
+ )>
  <person-card
    address=thisPerson.address
    phone=thisPerson.phone
    age=thisPerson.age
  />
</if>

That doesn't seem to be a valid syntax because TypeScript checking now throwing errors for all the props I'm passing into <person-card>:

Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'

Removing the comma fixes the issue but then my prettier --check command fails! So this may be related to https://github.com/marko-js/prettier (prettier-plugin-marko package), too.

Expected Behavior

The if block should look like this instead:

<if(
  thisPerson.address &&
  thisPerson.phone &&
  thisPerson.age &&
  thisPerson.nationality
)>

Possible Fix

Seems to be a linting issue.

Your Environment

  • Environment name and version (e.g. Chrome 39, node.js 5.4): Node v18.16.0.
  • Operating System and version (desktop or mobile): Windows 11, Ubuntu 20

Steps to Reproduce

  1. Create a template project with npx @marko/create
  2. Create file src/routes/_index/types.ts with this content:
export type Person = {
  age?: number;
  address?: string;
  phone?: string;
  nationality?: string;
}

export const person: Person = {
  age: 10,
  address: 'address',
  phone: 'phone',
  nationality: 'nationality',
}
  1. Create file src/components/person-card.marko with this content:
export interface Input {
    age: number;
    address: string;
    phone: string;
}
  1. Change +page.marko to this:
import { person } from "./types";
$ const thisPerson = person;

<if(thisPerson.address && thisPerson.phone && thisPerson.age && thisPerson.nationality)>
  <person-card
    address=thisPerson.address
    phone=thisPerson.phone
    age=thisPerson.age
  />
</if>
  1. Save the +page.marko file to replicate the Marko extension linting behaviour.

Stack Trace

Verbose Marko extension trace:
[Trace - 2:22:38 PM] Sending request 'textDocument/codeAction - (2194)'.
Params: {
    "textDocument": {
        "uri": "file:///home/user/code/marko-replicate-problem/src/routes/_index/%2Bpage.marko"
    },
    "range": {
        "start": {
            "line": 0,
            "character": 0
        },
        "end": {
            "line": 10,
            "character": 0
        }
    },
    "context": {
        "diagnostics": [],
        "only": [
            "source.fixAll.eslint"
        ],
        "triggerKind": 2
    }
}


[Trace - 2:22:38 PM] Received response 'textDocument/codeAction - (2194)' in 1ms.
No result returned.


[Trace - 2:22:38 PM] Sending request 'textDocument/formatting - (2195)'.
Params: {
    "textDocument": {
        "uri": "file:///home/user/code/marko-replicate-problem/src/routes/_index/%2Bpage.marko"
    },
    "options": {
        "tabSize": 2,
        "insertSpaces": true,
        "trimTrailingWhitespace": true
    }
}


[Trace - 2:22:38 PM] Received response 'textDocument/formatting - (2195)' in 31ms.
Result: [
    {
        "range": {
            "start": {
                "line": 0,
                "character": 0
            },
            "end": {
                "line": 10,
                "character": 0
            }
        },
        "newText": "import { person } from \"./types\";\n$ const thisPerson = person;\n\n<if(\n  thisPerson.address &&\n  thisPerson.phone &&\n  thisPerson.age &&\n  thisPerson.nationality,\n)>\n  <person-card\n    address=thisPerson.address\n    phone=thisPerson.phone\n    age=thisPerson.age\n  />\n</if>\n"
    }
]


[Trace - 2:22:38 PM] Sending notification 'textDocument/didChange'.
Params: {
    "textDocument": {
        "uri": "file:///home/user/code/marko-replicate-problem/src/routes/_index/%2Bpage.marko",
        "version": 574
    },
    "contentChanges": [
        {
            "range": {
                "start": {
                    "line": 3,
                    "character": 86
                },
                "end": {
                    "line": 3,
                    "character": 86
                }
            },
            "rangeLength": 0,
            "text": ",\n"
        },
        {
            "range": {
                "start": {
                    "line": 3,
                    "character": 63
                },
                "end": {
                    "line": 3,
                    "character": 63
                }
            },
            "rangeLength": 0,
            "text": "\n "
        },
        {
            "range": {
                "start": {
                    "line": 3,
                    "character": 45
                },
                "end": {
                    "line": 3,
                    "character": 45
                }
            },
            "rangeLength": 0,
            "text": "\n "
        },
        {
            "range": {
                "start": {
                    "line": 3,
                    "character": 26
                },
                "end": {
                    "line": 3,
                    "character": 26
                }
            },
            "rangeLength": 0,
            "text": " "
        },
        {
            "range": {
                "start": {
                    "line": 3,
                    "character": 25
                },
                "end": {
                    "line": 3,
                    "character": 25
                }
            },
            "rangeLength": 0,
            "text": "\n"
        },
        {
            "range": {
                "start": {
                    "line": 3,
                    "character": 4
                },
                "end": {
                    "line": 3,
                    "character": 4
                }
            },
            "rangeLength": 0,
            "text": "\n  "
        }
    ]
}


[Trace - 2:22:38 PM] Sending notification 'textDocument/didSave'.
Params: {
    "textDocument": {
        "uri": "file:///home/user/code/marko-replicate-problem/src/routes/_index/%2Bpage.marko"
    }
}


[Trace - 2:22:38 PM] Sending request 'textDocument/documentSymbol - (2196)'.
Params: {
    "textDocument": {
        "uri": "file:///home/user/code/marko-replicate-problem/src/routes/_index/%2Bpage.marko"
    }
}


[Trace - 2:22:38 PM] Received response 'textDocument/documentSymbol - (2196)' in 1ms.
Result: [
    {
        "name": "if",
        "kind": 5,
        "location": {
            "uri": "file:///home/user/code/marko-replicate-problem/src/routes/_index/%2Bpage.marko",
            "range": {
                "start": {
                    "line": 3,
                    "character": 0
                },
                "end": {
                    "line": 14,
                    "character": 5
                }
            }
        }
    },
    {
        "name": "person-card",
        "kind": 5,
        "location": {
            "uri": "file:///home/user/code/marko-replicate-problem/src/routes/_index/%2Bpage.marko",
            "range": {
                "start": {
                    "line": 9,
                    "character": 2
                },
                "end": {
                    "line": 13,
                    "character": 4
                }
            }
        }
    }
]


[Trace - 2:22:39 PM] Sending notification 'workspace/didChangeWatchedFiles'.
Params: {
    "changes": [
        {
            "uri": "file:///home/user/code/marko-replicate-problem/src/routes/_index/%2Bpage.marko",
            "type": 2
        }
    ]
}


[Trace - 2:22:39 PM] Received notification 'textDocument/publishDiagnostics'.
Params: {
    "uri": "file:///home/user/code/marko-replicate-problem/src/routes/_index/%2Bpage.marko",
    "diagnostics": [
        {
            "range": {
                "start": {
                    "line": 10,
                    "character": 4
                },
                "end": {
                    "line": 10,
                    "character": 11
                }
            },
            "source": "script",
            "code": 2322,
            "severity": 1,
            "message": "Type 'string | undefined' is not assignable to type 'string'.\n  Type 'undefined' is not assignable to type 'string'."
        },
        {
            "range": {
                "start": {
                    "line": 11,
                    "character": 4
                },
                "end": {
                    "line": 11,
                    "character": 9
                }
            },
            "source": "script",
            "code": 2322,
            "severity": 1,
            "message": "Type 'string | undefined' is not assignable to type 'string'.\n  Type 'undefined' is not assignable to type 'string'."
        },
        {
            "range": {
                "start": {
                    "line": 12,
                    "character": 4
                },
                "end": {
                    "line": 12,
                    "character": 7
                }
            },
            "source": "script",
            "code": 2322,
            "severity": 1,
            "message": "Type 'number | undefined' is not assignable to type 'number'.\n  Type 'undefined' is not assignable to type 'number'."
        }
    ]
}


[Trace - 2:22:39 PM] Sending request 'textDocument/documentLink - (2197)'.
Params: {
    "textDocument": {
        "uri": "file:///home/user/code/marko-replicate-problem/src/routes/_index/%2Bpage.marko"
    }
}


[Trace - 2:22:39 PM] Sending request 'textDocument/documentColor - (2198)'.
Params: {
    "textDocument": {
        "uri": "file:///home/user/code/marko-replicate-problem/src/routes/_index/%2Bpage.marko"
    }
}


[Trace - 2:22:39 PM] Received response 'textDocument/documentLink - (2197)' in 307ms.
Result: []


[Trace - 2:22:39 PM] Received response 'textDocument/documentColor - (2198)' in 308ms.
No result returned.

VSCode extension converts concise syntax to HTML

Marko VSCode 0.10.7

Details

With this extension installed, it automatically converts my concise code into html which I do not want.

Expected Behavior

Don't convert the code.

Actual Behavior

Converts to HTML.

Steps to Reproduce

Create a component with concise code and save it.

marko-type-check errors on attribute tags

Version

Using the latest versions for everything:

"marko": "^5.32.2"
"@marko/run": "^0.4.0",
"@marko/type-check": "^1.0.7",
"typescript": "^5.3.3"
// tsconfig.json
{
    "compilerOptions": {
      "strict": true,
      "target": "es6",
      "moduleResolution": "node",
      "allowSyntheticDefaultImports": true,
      "resolveJsonModule": true,
      "lib": ["es2018", "dom"]
    },
    "include": ["src/**/*", ".marko-run/**/*"]
}

Details

@marko/type-check is throwing an error at each of attr tags of the <await> tag.

For example, using the example from the <await> docs here,

$ const personPromise: Promise<{ name: string }> = new Promise(
    (resolve, reject) => {
        setTimeout(() => resolve({ name: "Frank" }), 1000);
    },
);

<await(personPromise) client-reorder>
    <@placeholder>
        <label>
            Loading…
            <progress/>
        </label>
    </@placeholder>

    <@then|person|>
        <p>Hello ${person.name}</p>
        <div>
            <button>Next</button>
        </div>
    </@then>

    <@catch|err: unknown|>
        error: ${err}
    </@catch>
</await>

Full marko-type-check output:

> [email protected] build
> marko-type-check && marko-run build

src\routes\+page.marko - error TS1323
Dynamic imports are only supported when the '--module' flag is set to 'es2020', 'es2022', 'esnext', 'commonjs', 'amd', 'system', 'umd', 'node16', or 'nodenext'.

src\routes\+page.marko:20:8 - error TS2353

  18 |
  19 |     <await(personPromise) client-reorder=true>
> 20 |       <@placeholder>
     |        ^^^^^^^^^^^^ Object literal may only specify known properties, and '[/*@placeholder*/Symbol.iterator]' does not exist in type '{ renderBody: Body<[], void>; }'.
  21 |         <!-- Displays while promise is pending -->
  22 |         <label>
  23 |           Loading…

node_modules\marko\src\core-tags\core\await\index.d.marko:5:3 - message TS6500

  3 |   then?: { renderBody: Marko.Body<[Awaited<T>]> };
  4 |   catch?: { renderBody: Marko.Body<[unknown]> };
> 5 |   placeholder?: { renderBody: Marko.Body };
    |   ^^^^^^^^^^^ The expected type comes from property 'placeholder' which is declared here on type 'Directives & Input<Promise<{ name: string; }>>'
  6 |   "client-reorder"?: boolean;
  7 |   name?: string;
  8 |   timeout?: number;

src\routes\+page.marko:28:8 - error TS2353

  26 |       </@placeholder>
  27 |
> 28 |       <@then|person|>
     |        ^^^^^ Object literal may only specify known properties, and '[/*@then*/Symbol.iterator]' does not exist in type '{ renderBody: Body<[{ name: string; }], void>; }'.
  29 |         <!-- Displays if promise resolves -->
  30 |         <p>Hello ${person.name}</p>
  31 |         <div>

node_modules\marko\src\core-tags\core\await\index.d.marko:3:3 - message TS6500

  1 | export interface Input<T> {
  2 |   value: readonly [T];
> 3 |   then?: { renderBody: Marko.Body<[Awaited<T>]> };
    |   ^^^^ The expected type comes from property 'then' which is declared here on type 'Directives & Input<Promise<{ name: string; }>>'
  4 |   catch?: { renderBody: Marko.Body<[unknown]> };
  5 |   placeholder?: { renderBody: Marko.Body };
  6 |   "client-reorder"?: boolean;

src\routes\+page.marko:37:11 - error TS18046

  35 |
  36 |       <@catch|err|>
> 37 |         ${err.name} error: ${err.message}
     |           ^^^ 'err' is of type 'unknown'.
  38 |       </@catch>
  39 |     </await>
  40 |   </body>

src\routes\+page.marko:37:30 - error TS18046

  35 |
  36 |       <@catch|err|>
> 37 |         ${err.name} error: ${err.message}
     |                              ^^^ 'err' is of type 'unknown'.
  38 |       </@catch>
  39 |     </await>
  40 |   </body>

src\routes\+page.marko:36:8 - error TS2353

  34 |       </@then>
  35 |
> 36 |       <@catch|err|>
     |        ^^^^^^ Object literal may only specify known properties, and '[/*@catch*/Symbol.iterator]' does not exist in type '{ renderBody: Body<[unknown], void>; }'.
  37 |         ${err.name} error: ${err.message}
  38 |       </@catch>
  39 |     </await>

node_modules\marko\src\core-tags\core\await\index.d.marko:4:3 - message TS6500

  2 |   value: readonly [T];
  3 |   then?: { renderBody: Marko.Body<[Awaited<T>]> };
> 4 |   catch?: { renderBody: Marko.Body<[unknown]> };
    |   ^^^^^ The expected type comes from property 'catch' which is declared here on type 'Directives & Input<Promise<{ name: string; }>>'
  5 |   placeholder?: { renderBody: Marko.Body };
  6 |   "client-reorder"?: boolean;
  7 |   name?: string;

src\routes\components\await-error.marko - error TS1323
Dynamic imports are only supported when the '--module' flag is set to 'es2020', 'es2022', 'esnext', 'commonjs', 'amd', 'system', 'umd', 'node16', or 'nodenext'.

src\routes\components\await-error.marko:8:6 - error TS2353

   6 |
   7 | <await(personPromise) client-reorder>
>  8 |     <@placeholder>
     |      ^^^^^^^^^^^^ Object literal may only specify known properties, and '[/*@placeholder*/Symbol.iterator]' does not exist in type '{ renderBody: Body<[], void>; }'.
   9 |         <label>
  10 |             Loading…
  11 |             <progress/>

node_modules\marko\src\core-tags\core\await\index.d.marko:5:3 - message TS6500

  3 |   then?: { renderBody: Marko.Body<[Awaited<T>]> };
  4 |   catch?: { renderBody: Marko.Body<[unknown]> };
> 5 |   placeholder?: { renderBody: Marko.Body };
    |   ^^^^^^^^^^^ The expected type comes from property 'placeholder' which is declared here on type 'Directives & Input<Promise<{ name: string; }>>'
  6 |   "client-reorder"?: boolean;
  7 |   name?: string;
  8 |   timeout?: number;

src\routes\components\await-error.marko:15:6 - error TS2353

  13 |     </@placeholder>
  14 |
> 15 |     <@then|person|>
     |      ^^^^^ Object literal may only specify known properties, and '[/*@then*/Symbol.iterator]' does not exist in type '{ renderBody: Body<[{ name: string; }], void>; }'.
  16 |         <p>Hello ${person.name}</p>
  17 |         <div>
  18 |             <button>Next</button>

node_modules\marko\src\core-tags\core\await\index.d.marko:3:3 - message TS6500

  1 | export interface Input<T> {
  2 |   value: readonly [T];
> 3 |   then?: { renderBody: Marko.Body<[Awaited<T>]> };
    |   ^^^^ The expected type comes from property 'then' which is declared here on type 'Directives & Input<Promise<{ name: string; }>>'
  4 |   catch?: { renderBody: Marko.Body<[unknown]> };
  5 |   placeholder?: { renderBody: Marko.Body };
  6 |   "client-reorder"?: boolean;

src\routes\components\await-error.marko:22:6 - error TS2353

  20 |     </@then>
  21 |
> 22 |     <@catch|err: unknown|>
     |      ^^^^^^ Object literal may only specify known properties, and '[/*@catch*/Symbol.iterator]' does not exist in type '{ renderBody: Body<[unknown], void>; }'.
  23 |         error: ${err}
  24 |     </@catch>
  25 | </await>

node_modules\marko\src\core-tags\core\await\index.d.marko:4:3 - message TS6500

  2 |   value: readonly [T];
  3 |   then?: { renderBody: Marko.Body<[Awaited<T>]> };
> 4 |   catch?: { renderBody: Marko.Body<[unknown]> };
    |   ^^^^^ The expected type comes from property 'catch' which is declared here on type 'Directives & Input<Promise<{ name: string; }>>'
  5 |   placeholder?: { renderBody: Marko.Body };
  6 |   "client-reorder"?: boolean;
  7 |   name?: string;

Your Environment

Node 18.18.2, Windows 11

Crash on startup of `@marko/type-check`

@marko/[email protected]

└─┬ @marko/[email protected]
└── @marko/[email protected]

Details

A recent upgrade to @marko/language-tools broke @marko/type-check.

I was using @marko/[email protected] and only upgraded transitive dependencies in my package-lock.json and the below error started to occur. Upgrading all of my @marko/* packages, including to @marko/[email protected] did not help.

Expected Behavior

mtc to type-check my Marko files.

Actual Behavior

mtc crashed with the following error message.

> mtc

/node_modules/@marko/language-tools/dist/index.js:3072
      throw new Error(
      ^

Error: @marko/compiler must be installed or compiler registered.
    at getMeta (/node_modules/@marko/language-tools/dist/index.js:3072:13)
    at getMeta (/node_modules/@marko/language-tools/dist/index.js:3102:16)
    at getConfig (/node_modules/@marko/language-tools/dist/index.js:2950:10)
    at getTypeLibs (/node_modules/@marko/language-tools/dist/index.js:2957:18)
    at Object.create (/node_modules/@marko/language-tools/dist/index.js:3168:26)
    at Object.create (/node_modules/@marko/language-tools/dist/index.js:3322:46)
    at createCompilerHost (/node_modules/@marko/type-check/dist/cli.js:337:55)
    at run (/node_modules/@marko/type-check/dist/cli.js:81:53)
    at Object.<anonymous> (/node_modules/@marko/type-check/dist/cli.js:591:3)
    at Module._compile (node:internal/modules/cjs/loader:1218:14)

Node.js v18.13.0

Your Environment

Node.js v18.13.0 MacOS 13.4.1

Status Update?

Development seems to have stopped after the initial release, I hope it is still going on privately?

I have been using marko for some time now, and good editor support will make sure I keep using it in future projects. Is there any way I can contribute to this?

[Language Server] Importing a `type` from an external `*.marko` file from a `*.ts` file throws an error

@marko/[email protected]

Details

In VS Code, when importing a type definition from a package outside of the project, the Marko language server displays an error.

Using library-ts + eBay UI Core as an example:

/my-project/src/types/index.ts

import type { Input as EbayButton } from "@ebay/ebayui-core/dist/components/ebay-button/index.d.marko";

export type { EbayButton };

File '/my-project/node_modules/@ebay/ebayui-core/dist/components/ebay-button/index.d.marko' is not under 'rootDir' '/my-project/src'. 'rootDir' is expected to contain all source files.

Expected Behavior

No error is displayed.

Actual Behavior

An error is displayed (the path to the type declaration file is underlined in red).

Possible Fix

Additional Info

Your Environment

Steps to Reproduce

  1. Clone library-ts from https://github.com/marko-js/examples/tree/master/examples/library-ts
  2. npm install @ebay/ebayui-core
  3. Create src/types/index.ts
  4. Add the code in the description above

Stack Trace

The file is in the program because:
    Imported via "@ebay/ebayui-core/dist/components/ebay-button/index.d.marko" from file '/my-project/src/types/index.ts'
    Imported via "./index.marko" from file '/my-project/node_modules/@ebay/ebayui-core/dist/components/ebay-button/component-browser.d.ts'
    Root file specified for compilation ts(6059)

On Windows, diagnostics are show at the incorrect position after a custom tag

On Windows, after a custom tag is used, the diagnostics are shown at the incorrect positions or not shown at all. marko-type-check still shows the correct errors in the correct positions.

Given the following template, every instance of input.name++ should have an error underline.

export interface Input {
    name?: string;
}
<my-title name=input.name/>
<div>${input.name++}</div>
$ input.name++;
<div>${input.name++}</div>

The error is shown in the wrong position and only once:

export interface Input {
    name?: string;
}
<my-title name=input.name/>
<div>${input.name++}</div>
$ input.name++;
<div>${input.name++}</div>
 ^ 'input.name' is possibly 'undefined'.

Moving the use of <my-title> below the errors will cause the diagnostics above to be correctly rendered and the diagnostics below to be ignored.

export interface Input {
    name?: string;
}
<div>${input.name++}</div>
       ^^^^^^^^^^ 'input.name' is possibly 'undefined'.
<my-title name=input.name/>
$ input.name++;
<div>${input.name++}</div>

Removing the use of <my-title> shows all of the diagnostics in the right places as expected:

export interface Input {
    name?: string;
}
<div>${input.name++}</div>
       ^^^^^^^^^^ 'input.name' is possibly 'undefined'.
$ input.name++;
  ^^^^^^^^^^ 'input.name' is possibly 'undefined'.
<div>${input.name++}</div>
       ^^^^^^^^^^ 'input.name' is possibly 'undefined'.

Environment

Windows :(
Marko VSCode v1.1.15
VSCode 1.85.1

    "marko": "^5.32.2",
    "@marko/run": "^0.4.0",
    "@marko/type-check": "^1.0.7",
    "typescript": "^5.3.3"

pnpm monorepo uncompressible errors

Marko VSCode v1.1.9

Details

Expected Behavior

To use a language server as any other

Actual Behavior

I see "uncompressible" errors on .marko files

Possible Fix

Don't use pnpm or a monorepo
Extract the project to a different directory

Your Environment

VsCode
Version: 1.84.2 (user setup)
Electron: 25.9.2
ElectronBuildId: 24603566
Chromium: 114.0.5735.289
Node.js: 18.15.0
V8: 11.4.183.29-electron.0
OS: Windows_NT x64 10.0.19045

Steps to Reproduce

  1. clone the project then navigate to the yt-clone branch
  2. set up pnpm i
  3. navigate to packages/yt-clone then npm i (because this project is ignored by the monorepo)
  4. navigate to packages/yt-clone/src/components/controls.marko

marko-language-server-pnpm-bug

Stack Trace

marko-language-server-log.txt.txt

Unable to type-check <for/> tag

Version

All the latest Markos as of today.

"@marko/run": "^0.3.2",
"@marko/tags-api-preview": "^0.7.2",
"@marko/testing-library": "^6.1.4",
"@marko/type-check": "^1.0.2",
"@marko/vite": "^4.1.1",
"marko": "^5.32.0",

Details

@marko/type-check doesn't seem to like <for/> from the Tags API preview.

I'm trying to use <for by=...> to key for-loops with the Tags API preview. It looks like the code runs, but @marko/type-check complains about it.

Given the following sample component:

<!-- use tags -->
static interface Foo {
  id: string;
}

<let/foos=([] as Foo[])/>
<for|foo| of=foos by=(({ id }: Foo) => id)>
  <div>${foo.id}</div>
</for>

When running @marko/type-check, I get:

src/components/foo.marko:7:19 - error TS2769

   5 |
   6 | <let/foos=([] as Foo[])/>
>  7 | <for|foo| of=foos by=(({ id }: Foo) => id)>
     |                   ^^
No overload matches this call.
The last overload gave the following error.
Argument of type '{ of: Foo[]; by: ({ id }: Foo) => number; renderBody: (foo: Foo) => MarkoReturn<void>; }' is not assignable to parameter of type '({ from?: number | undefined; to: number; step?: number | undefined; } | { in: unknown; } | { of: readonly unknown[] | Iterable<unknown>; }) & { renderBody?: ((foo: Foo) => MarkoReturn<void>) | undefined; }'.
Object literal may only specify known properties, and '"by"' does not exist in type '({ from?: number | undefined; to: number; step?: number | undefined; } | { in: unknown; } | { of: readonly unknown[] | Iterable<unknown>; }) & { renderBody?: ((foo: Foo) => MarkoReturn<void>) | undefined; }'.
   8 |   <div>${foo.id}</div>
   9 | </for>
  10 |

node_modules/@marko/language-tools/marko.internal.d.ts:194:23 - error TS2771

  192 |       }): ReturnAndScope<RenderBodyScope<RenderBody>, void>;
  193 |
> 194 |       export function forTag<RenderBody extends AnyMarkoBody>(
      |                       ^^^^^^ The last overload is declared here.
  195 |         input: (
  196 |           | {
  197 |               from?: number;

It looks like it is trying to apply type-checking for the Class API syntax instead.

Out of curiosity, I also tried using key

<for|foo| of=foos>
  <div key=foo.id>
    ${foo.id}
  </div>
</for>

But I rightfully get an error that I cannot mix Class API and Tags APIs.

Your Environment

Node 20.8.1, Mac OS 13.6.2

Publish VSCode extension to Open-VSX registry

Description

We're using Theia as an integrated IDE which uses VSCode-compatible extensions published to Open-VSX. Currently, the VSCode extension is not published to Open-VSX, so we do not enjoy any syntax highlighting or other DX niceties.

Why

Publishing the VSCode extension to Open-VSX will enable improved DX in any VSX compatible IDE.

Possible Implementation & Open Questions

https://github.com/eclipse/openvsx/wiki/Publishing-Extensions#how-to-publish-an-extension

Is this something you're interested in working on?

[type-check] `mtc` removes JSDoc property comments during compilation for types/interfaces in `*.marko` components

@marko/[email protected]

Details

Transpiling interfaces for *.marko files have JSDoc property comments stripped in the transpiled output.

Expected Behavior

Running mtc for an index.marko file with the following interface:

export interface Input {
  /** The text to display as the hero's heading. */
  text: string;
  /** An optional subtitle to display below the heading. */
  subtitle?: string;
  /** The URL to navigate to when the subtitle is clicked. When specified, this changes the subtitle from plain text to a link. */
  subtitleHref?: string;
  /** The URL of the image to display in the hero. */
  imageUrl: string;
  /** The text to be read by screen readers for the image. */
  imageDescription?: string;
}

Should result in the JSDoc property comments being preserved in the transpiled index.d.marko type declaration file:

export interface Input {
  /** The text to display as the hero's heading. */
  text: string;
  /** An optional subtitle to display below the heading. */
  subtitle?: string;
  /** The URL to navigate to when the subtitle is clicked. When specified, this changes the subtitle from plain text to a link. */
  subtitleHref?: string;
  /** The URL of the image to display in the hero. */
  imageUrl: string;
  /** The text to be read by screen readers for the image. */
  imageDescription?: string;
}

Actual Behavior

The transpiled type declaration file index.d.marko has its JSDoc property comments stripped:

export interface Input {
    text: string;
    subtitle?: string;
    subtitleHref?: string;
    imageUrl: string;
    imageDescription?: string;
}

Possible Fix

Switching removeComments from true to false in mtc preserves the comments in the output:

removeComments: true,

Possible fixes:

  • Use the value of removeComments from the project's tsconfig.json
  • Add a CLI option for changing the removeComments setting
Additional Info

Your Environment

  • Environment name and version (e.g. Chrome 39, node.js 5.4): Node.js v20.12.2
  • Operating System and version (desktop or mobile): Mac Sonoma 14.5
  • Link to your project: https://github.corp.ebay.com/Sonata/ui

Steps to Reproduce

  1. Clone library-ts
  2. Create a src/components/demo/index.marko file that exports the interface in the description above (with JSDoc property comments)
  3. Run npm run build
  4. View the transpiled dist/components/demo/index.d.marko output and see how the inline comments were removed

Stack Trace

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.