fxbois / web-mode

web template editing mode for emacs
https://web-mode.org
GNU General Public License v3.0
1.63k stars 262 forks source link

tempalate string literals not recognized #1252

Closed MarcRohrer closed 1 year ago

MarcRohrer commented 2 years ago

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 = `

   <div>${div}</div>
`
return html

}

fxbois commented 2 years ago

try const s = html`

MarcRohrer commented 2 years ago

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 commented 2 years ago

Hi,

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

best wishes!

Marc

fxbois commented 1 year ago

I've pushed a small fix

fxbois commented 1 year ago

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")

MarcRohrer commented 1 year ago

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: @.***>

ispringle commented 1 year ago

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.