web-mode icon indicating copy to clipboard operation
web-mode copied to clipboard

tempalate string literals not recognized

Open MarcRohrer opened this issue 2 years ago • 3 comments

Hi,

I want to do web development with Emacs and web-mode seems the right thing to use. Thanx for your effort!

I heavily use HTML inside template string literals, but although web-mode-enable-literal-interpolation is set to true, only the placeholders are recognized, not html and no css in the style tags.

Example:

image

Am I doing something wrong? In the example there are only tagged template string literals. Are they the only ones supported?

Best wishes!

Marc

--- WEB-MODE DEBUG BEG --- versions: emacs(28.1) web-mode("17.2.3") vars: engine("none") minor("none") content-type("javascript") file("h:/src/components/test.js") system: window(w32) config("x86_64-w64-mingw32") colors: fg(nil) bg(nil) minor modes: (show-paren-mode eldoc-mode global-eldoc-mode display-line-numbers-mode global-display-line-numbers-mode cua-mode tab-line-mode global-tab-line-mode global-auto-revert-mode windmove-mode savehist-mode leaf-key-override-global-mode beacon-mode flycheck-mode global-flycheck-mode smartparens-mode smartparens-global-mode rainbow-delimiters-mode vertico-mode marginalia-mode yas-minor-mode yas-global-mode which-key-mode popper-mode popper-echo-mode treemacs-fringe-indicator-mode treemacs-indent-guide-mode treemacs-follow-mode treemacs-filewatch-mode treemacs-icons-dired-mode company-mode global-company-mode lsp-mode lsp-managed-mode lsp-ui-sideline-mode lsp-ui-doc-mode lsp-ui-mode dap-mode dap-auto-configure-mode lsp-completion-mode dap-ui-mode dap-ui-controls-mode dap-ui-many-windows-mode dap-tooltip-mode lsp-modeline-code-actions-mode lsp-modeline-diagnostics-mode lsp-modeline-workspace-status-mode lsp-headerline-breadcrumb-mode lsp-diagnostics-mode) vars: web-mode-enable-current-column-highlight=nil web-mode-enable-current-element-highlight=t indent-tabs-mode=nil --- WEB-MODE DEBUG END ---

Test Code (test.js):

function getHTML(div){ const html = <style> div { background: black; } </style> <div>${div}</div> return html }

MarcRohrer avatar Aug 08 '22 09:08 MarcRohrer

try const s = html`

fxbois avatar Aug 19 '22 09:08 fxbois

Hi,

as of my understanding this would be a tagged template literal then, where I have to provide a function called html which puts the parts together again. This would be pure annecessary overhead in the final program, right?

There should be a better solution!

Thank you for your attention! best wishes!

Marc

MarcRohrer avatar Aug 22 '22 05:08 MarcRohrer

Hi,

I tried it out anyway and there actually isn't any difference.

best wishes!

Marc

MarcRohrer avatar Aug 22 '22 05:08 MarcRohrer

I've pushed a small fix

fxbois avatar Oct 12 '22 07:10 fxbois

do not forget to set colors for example (set-face-attribute 'web-mode-interpolate-color1-face nil :foreground "#c2795e") (set-face-attribute 'web-mode-interpolate-color2-face nil :foreground "#653525") (set-face-attribute 'web-mode-interpolate-color3-face nil :foreground "#cc9682") (set-face-attribute 'web-mode-interpolate-color4-face nil :foreground "#9e8075")

fxbois avatar Oct 12 '22 07:10 fxbois

Hi,

 

great! Thanx! I will try that!

 

Marc

   

Gesendet: Mittwoch, 12. Oktober 2022 um 09:38 Uhr Von: "fxbois" @.> An: "fxbois/web-mode" @.> Cc: "Marc Rohrer" @.>, "Author" @.> Betreff: Re: [fxbois/web-mode] tempalate string literals not recognized (Issue #1252)

 

do not forget to set colors for example

(set-face-attribute 'web-mode-interpolate-color2-face nil :foreground "#653525") (set-face-attribute 'web-mode-interpolate-color3-face nil :foreground "#cc9682") (set-face-attribute 'web-mode-interpolate-color4-face nil :foreground "#9e8075")```

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

MarcRohrer avatar Oct 12 '22 11:10 MarcRohrer

I too am having issues getting this working. I'm running the 20221012.800 version which looks to include the commit you created to address this issue.

ispringle avatar Oct 19 '22 15:10 ispringle