pushqrdx / vscode-inline-html Goto Github PK

I wish webstorm could add this

also is there a way I dont have to keep repeating css like here:

doesnt seem to work with ternary's if you put it in the 2nd condition:

whole code:

//stored in /components/nav.js

/**
 * IMPORTANT This component assumes a single parent wrapper alongside a main sibling for content so
 * that it can change the flex direction of the parent
 * @param hostComponent
 *
 * @example
 * in sidebar mode
 *       <nav data-component="nav" data-header-bar="true"></nav>
 *
 */
export default (hostComponent) => {
  const render = (isHeaderBarMode = false) => {
    // dont display the nav if we are in header bar mode and modify the parent flex direction
    let { burgerPx,headerBar} = hostComponent.dataset
    if(!headerBar && burgerPx) {
throw new Error("you do not need burgerPx when headerBar isn't true" )
    }

    if (headerBar === 'true') {
      hostComponent.style.display = 'none';
    }







    // CSS styles for the navigation component

    // language=CSS
    const navStyles = /* css */`
      nav {
  animation: 0.5s ease-in-out 0s 1 slideInFromLeft;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 10px 20px;
  background-color: var(--sidenav-color);
  min-width: 140px;
  flex-wrap: wrap;


  & button {
    width: 100%;
  }
  &.header-bar-mode {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    & a {
      color: var(--default-text);
      justify-content: center;
      align-items: center;
    }
    
  }
          
         
        
          ${burgerPx?/* css */ `
        @media (max-width: ${burgerPx}px) {
          &.header-bar-mode {

        flex-direction: column;
        
        }
        }`:/* css */`
          @media (max-width: 600px) {
    & .text {
      display: none;
    }
    min-width: auto;
  }
        `}
}`;
    // Update the count display and button markup together
    hostComponent.innerHTML = `
        <style>${navStyles}</style>
        <a data-nav href="/" title="Home">
          <span class="icon">&#x1F3E0;</span>
          <!-- Unicode for a house, similar to a home icon -->
          <span class="text">Home</span>
        </a>
        <a data-nav href="/button-badge" title="Button + Badges Design System">
          <span class="icon">&#x1F518;</span>
          <!-- Unicode for a pencil, similar to an edit or form icon -->
          <span class="text">Button + Badges</span>
        </a>
        <a data-nav href="/form" title="Form Design System">
          <span class="icon">&#x270F;</span>
          <!-- Unicode for a pencil, similar to an edit or form icon -->
          <span class="text">Form</span>
        </a>
        <a data-nav href="/maps" title="Map example">
          <span class="icon">&#x1F5FA;</span>
          <!-- Unicode for a pencil, similar to an edit or form icon -->
          <span class="text">Maps</span>
        </a>

        <a data-nav href="/users" title="DB retrival example (requires the deno backend to run - see readme (Optional Backend))">
          <span class="icon">👥</span>
          <span class="text">DB users</span>
        </a>
        <a data-nav href="/calendar" title="Calendar Example">
          <span class="icon"> 📆 </span>
          <span class="text"> Calendar</span>
        </a>
        <a data-nav href="/multiple-instances" title="Multiple instances of vanilla.js comoonets in action with shared state">
          <span class="icon">🧬</span>
          <span class="text">Multiple instances</span>
        </a>
        <a data-nav href="/cookies" title="Elementary cookie popup permissions thing">
          <span class="icon">🍪</span>
          <span class="text">Cookie popup</span>
        </a>`;

    //add classes button secondary squarify to all nav links
    hostComponent.querySelectorAll('a').forEach((navLink) => {
      navLink.classList.add('button', 'secondary', 'squarify');
    });
    if (hostComponent.dataset.headerBar === 'true') {
      hostComponent.classList.add('header-bar-mode');
      // todo find a better way to do this
      hostComponent.parentElement.style.flexDirection = 'column';

      //remove the icons to save horizontal space only if the flex container starts to run out of space

      hostComponent.querySelectorAll('.icon').forEach((icon) => {
        //  icon.style.display = 'none';
      });
    }
    // the only thing not in css to make visible after we change the parent
    hostComponent.style.display = 'flex';
  };

  // Display the initial count
  render();
};

I noticed there is a file named croc taking up more than half the extension size:

$ du -sh ~/.vscode/extensions/pushqrdx.inline-html-*/* | sort -h | tail -n4
540K	/Users/kid/.vscode/extensions/pushqrdx.inline-html-0.3.5/docs
3.8M	/Users/kid/.vscode/extensions/pushqrdx.inline-html-0.3.5/node_modules
5.4M	/Users/kid/.vscode/extensions/pushqrdx.inline-html-0.3.5/croc
9.8M	total

Upon inspecting it seems to be an executable of https://github.com/schollz/croc:

$ file ~/.vscode/extensions/pushqrdx.inline-html-*/croc
/Users/kid/.vscode/extensions/pushqrdx.inline-html-0.3.5/croc: ELF 64-bit LSB executable, x86-64, version 1 (SYSV), statically linked, Go BuildID=6ad6eCjoCpDzAgT4fa1q/zgtYT6Jqz8Hudut1Z9pr/XktDKbBkBi9_EQ6gPETk/GnREkn9n1QHz_srmnqP8, stripped

There is no mention of the file in the repository, and its usage has nothing to do with the extension. I believe this is a mistake, and the extension should be republished with the executable removed.

• Issue Type: Performance
• Extension Name: inline-html
• Extension Version: 0.2.5
• OS Version: Windows_NT x64 10.0.17763
• VSCode version: 1.38.1

⚠️ Make sure to attach this file from your home-directory:
⚠️C:\Users\dam80\pushqrdx.inline-html-unresponsive.cpuprofile.txt

Find more details here: https://github.com/Microsoft/vscode/wiki/Explain:-extension-causes-high-cpu-load

I am not seeing the expected syntax highlighting anymore in JS/TS/JSX/TSX files:

Unfortunately 81839d4 has broken the comment-style tags. I wish I knew enough regex to fix it!

Eg.

doSomething( /*html*/`<div class="test">test</div>`);

VSCode with v0.3.4:

VSCode with v0.3.3:

It would be perfect if these configurations in vscode were supported!

{
  "editor.linkedEditing": true,
  "html.autoClosingTags": true,
  "typescript.autoClosingTags": true,
}

Add support for HTML files.

It would be nice if the html template literal was syntax highlighted also within a script in an HTML file (like in HTML imports of Polymer 2 components).

For example:

...
<script>
const foo = html`<p class="bar">foo</p>`;
</script>

Hello. Assuming the code:

export default /*html*/`

blah blah blah

<!-- comment -->

blah2 blah2 blah2
`;

'blah blah blah' is shown correctly.
'blah2 blah2 blah2' is not.

markdowns used alongside a lot with HTML. supporting them would be useful for blog generators.

Alternatives

I've been using https://marketplace.visualstudio.com/items?itemName=jeoht.es6-string-markdown, however there's caveats:

• repository is gone
• it does not work properly with indented markdowns

const text = /*md*/`
	# This heading is not highlighted

# This heading is correctly highlighted
`

double curly braces inside the /html/ template string break syntax highlighting throughout the file

everything is fine without them

Environment Observed In

Extension version: v0.3.5
VS Code version: 1.69.1
OS: Windows 11

Steps to reproduce

• In a Javascript or Typescript file, paste the following:

  const markup = /*html*/`
    <style>
      
    </style>
  `;

• Place the cursor on the blank line
• Execute the Toggle Line Comment (command id is editor.action.commentLine) command
  • By default on Windows this command is bound to ctrl+/

Expected Behavior

The editor adds the sequence /* */ (CSS comment) in place as it does when you execute the same command inside a <style> tag in an HTML file.

Observed Behavior

The editor adds the sequence <!-- --> (HTML comment) in place.

Perhaps I'm missing a way of escaping double quotes, below doesn't look quite right. es6-string-html highlights it more according to expectation.

Thanks for the extension otherwise - having emmet etc is great!

Please add the possibility to intellisense for CSS, something like this:

css`
    div {
        color: red
    }
`

Is there a way to include data provided to the html.customData and css.customData properties in the settings.json? It would be amazing to get docs and autocomplete for our custom elements in tagged templates.

https://github.com/microsoft/vscode-custom-data

I just installed the extension (thanks! :)

When I create an html inline string, the first tag I add does not get emmet-expanded - I see the emmet popup, but when I hit Enter, it disappears without substituting.

After I manually enter a valid closed tag, all works fine following it.

It would be nice to support a syntax like

return /* html */`
    <h2>foo</h2>
  `;

as well.

Especially as eslint usually will complain if you write it like this /*html*/.

so you end up writing it like this :(

// eslint-disable-next-line spaced-comment
return /*html*/`
    <h2>foo</h2>
  `;

I'm loving it! Ever thought about formatting? I'm using it in the context of lit-html and have to format the templates by hand at the moment o.o

Have a great day!

Hello, first, thank you so much for the VSCode extension, it's great.

About the issue:
In .html file, when I autocomplete an attribute, it creates double quotes. But this is not happening in .js files.

Before enter:

After enter:

Expected:

This is my config in vscode

  "html.autoCreateQuotes": true,
  "html.completion.attributeDefaultValue": "doublequotes",

Hi, thank you very much for creating this vs code extension. I use it every day for my work. But i miss one thing: syntax highlighting and code intellisense for <script> tags like:

const template = () => html`
  <script>
    console.log(navigator.userAgent)
  </script>
`

To be honest, it's quite annoying when you don't get any code suggestions etc.. Especially with the many DOM Apis that would be really helpful.

I would be very happy if inline html could support this in the future

For example:

heredoc:

function outputhtml()
{
echo <<<html
   <html>
   <head><title>主页</title></head>
   <body>主页内容</body>
   </html>
html;
}

function outputhtml()
{
echo /*html*/'
   <html>
   <head><title>主页</title></head>
   <body>主页内容</body>
   </html>
   ';
}

hi,
for cshtml file, looks not working? any workaround?
cheers,
mian

when doing html`markup`
when running my code I get errors because of the apparent random reference to "html"

I had to use

/*html*/`markup`

and that worked, but it'd be nice if I could get the other method to work.
I'm using the string in an assignment directly to a template element's innerHTML, similar to the template-literal seen here on a repo of mine.

Hi,

would it be possible to keep the functionality of beautifier plugins inside the strings?

With extension enabled:

Extension disabled:

The theme used is GitHub Dark Default

Can't get the intellisense/Emmet in a child template string, consider this snippet:

As you can see, the template string inside the array map callback, doesn't give intellisense nor Emmet, only syntax highlighting as showed in the below screenshot.

Vs Code Version + OS

Wonderful Extension! Thank you.

Prettier doesn't format my template literals unless /* HTML */ is used.
Inline HTML only works with /* html */

Could the two be combined by adding /* HTML */ to Inline HTML's recognised comments?

When I write atributes for HTML tags and properties in CSS don't autocomplete full.

Example in HTML

Actually: class
Request: class = "( cursor inside )"

Example in CSS

Actually: box-sizing
Request: box-sizing: ( after appear the select property and select the property autocomplete the ; )

Thanks for your good extension

I tried this extension inside a javascript file and Emmet did not work or anything.

If I have code like:

let a = document.querySelector(`html`);
let b;
let c = document.querySelectorAll(`a`);

It seems to think that anything between the html and the a is in an html or css context, not sure of which, it gives hover tooltips like these:

Things I have tried, these all make the problem go away:

• Disable/enable extension when it's the only one in the workspace (it's how I know it's this extension that causes it when enabled)
• Change the quotation marks in either html or a from backticks to single or double quotes
• Change the html string to something else that is not the literal html string (like htm or tml ).

Hey,

since the last update from VSCode, it seems like the highlighting is not working anymore:

Also it looks like the intellisense for default html tags is working:

But Emmet is not:

(Keine Vorschläge = no results)

Best Regards
Marcel

This is a great extension! Thanks! It would be great if it ran Stylelint on the CSS blocks.

Here's a starting point: https://stylelint.io/user-guide/options/#customsyntax

Hi! First of all: this extension is 10/10, it allows me to create dynamic HTML elements on a totally different level!

I have a little remark. The head (character: &gt) of the arrow functions inside template literal expressions has an error color. Can you do something with it?

Code folding is currently not supported.

Would be great have this feature like exists for html or JSX

before pressing Enter

after

• Issue Type: Performance
• Extension Name: inline-html
• Extension Version: 0.3.3
• OS Version: Windows_NT x64 10.0.22483
• VS Code version: 1.61.2

⚠️ Make sure to attach this file from your home-directory:
⚠️c:\Users\tisum\AppData\Local\Temp\pushqrdx.inline-html-unresponsive.cpuprofile.txt

Find more details here: https://github.com/microsoft/vscode/wiki/Explain-extension-causes-high-cpu-load

• Issue Type: Performance
• Extension Name: inline-html
• Extension Version: 0.3.5
• OS Version: Windows_NT x64 10.0.19041
• VS Code version: 1.72.1

⚠️ Make sure to attach this file from your home-directory:
⚠️file:///c%3A/Users/Jacques/AppData/Local/Temp/pushqrdx.inline-html-unresponsive.cpuprofile.txt

Find more details here: https://github.com/microsoft/vscode/wiki/Explain-extension-causes-high-cpu-load

Hi, thanks for the awesome plugin!

Would it be possible to add support for other types of syntax highlighters? I'm building a code mod tool and it would be great to have this IDE feature when writing test tables that contain tsx syntax as inputs:

const codeFixerTestTable = [{
    input: /* tsx */ `
        export const Test1 = ({ id }) => {
            return <div id={id}>foo</div>;
        };
    `,
    expect: /* tsx */ `
        export const Test1 = ({ id }) => {
            return <div id={id}>
                <wrapper>foo</wrapper>
            </div>;
        };        
    `
}]

Perhaps I'm oversimplifying things but wouldn't it be possible to use any built-in language mode in VS Code if the file extension was specified in the comment prefix? I'd be happy to help contribute to the project if you could point me in the right direction!

Thanks

First of all, thanks for your work on this extension, its awesome.

I'm not actually sure if this is a bug, but it seemed odd so I thought I'd document it here.

Here's the relevant example (all of this is within an /* html */ template literal.

Its interesting that there a 3 different colors used across the 4 instances of ${. I've observed this with different themes applied, the screenshot is with VS Code's default dark theme.

Currently, this is supported:

/*css*/`
  .selector {
    display: block;
  }
`

But this is not:

/*css*/`
  display: block;
`

I propose adding a new syntax specific for CSS styles—a commonly used pattern when adding styles to an element inline in JavaScript frameworks—like this:

/*style*/`
  display: block;
`

When I select a tag em press return:

the autocomplet return this

and when I press ctr+z, it complets with this

Some times I select width and the autocomplete complets with windows.

I have a specific situation - I need to be able to write inline Web Workers and I need JS syntax highliting for this.

Would you add this option?

We often use this syntax:

const StyledDiv = styled.div`
  color: red;
  font-size: 20px;
`;

But this is the syntax highlighting I see:

It would be great to support that syntax out of the box for CSS strings while retaining support for CSS intellisense and Emmet, etc.:

styled.element`...`

I have a small suggestion for a feature: show the syntax highlighted html with a slightly different background color, to make it clearer where the html string starts and stops. Not sure if this is possible though?

It would be very convenient to add /html/ with some hotkey.