Replies: 4 comments
-
|
Thank for good idea :-)
link(href="/static/vendor/css/styles.css" rel="stylesheet" )
script(src="/static/vendor/lib/socket.io.js")
img(src="/static/vendor/images/logo.png")
link(href=require('~Styles/main.scss') rel="stylesheet" )
script(src=require('~Scripts/main.ts'))
img(src=require('~Images/logo.png'))How can we differentiate the path when we should leave it as it is and when we should compile the sources? I see only one case for " leave it as is", it is URL like: img(src="https://vendor/images/logo.png")
img(src="http://vendor/images/logo.png")
img(src="//vendor/images/logo.png")But what should be with others? |
Beta Was this translation helpful? Give feedback.
-
|
Mmh I understand the problem. The filter option still seems the best way to keep the source as "native" as possible. I understand that it is not good practice but I am still favorable to provide the possibility and let the user decide whether to use it. I believe that even URLs are not safe to be left as is with One probably could add a "static-asset-loader" (or similar) that just returns the path/URL as is. It woul be possible to use e.g. "!!static-asset!/some/path-or-url" as path. One could then also add loader rules to the webpack config (e.g. also using issuer option) to imlpement a kind of "filter" so the plugin would not strictly need to support this option directly. Right now I can't think of any other way to handle this but having the mentioned possibilities and making the auto-loading feature optional would be enough IMO. |
Beta Was this translation helpful? Give feedback.
-
Specification for new syntaxI think that the usage a prefix for static assets would be good candidate for solution. We can define the prefix for static assets like
Usage of static assets with pug-loader//- local hosted static assets
link(href="!!asset-static!/vendor/css/styles.css" rel="stylesheet" )
script(src="!!asset-static!/vendor/lib/socket.io.js")
img(src="!!asset-static!/vendor/images/logo.png")
//- URL to remote static assets, note: the `//` is equal to both `http://` and `https://`,
here is the prefix `!!asset-static!` optional
script(src="!!asset-static!//vendor/lib/socket.io.js")
script(src="//vendor/lib/socket.io.js")Usage of source assets with pug-loader (defaults, w/o any prefix)link(href='~Styles/main.scss' rel="stylesheet" )
script(src='~Scripts/main.ts')
img(src='~Images/logo.png')
h1 Hello Pug!PRO:
CONTRA:
For transition period to new syntax, by using the In general, I support your Idea to avoid usage But this idea should be accepted by the pug community. |
Beta Was this translation helpful? Give feedback.
-
one year later ...Hello @m10, I didn't forget about your suggestion. This plugin works like the pug-plugin (on same code base), but you can use any HTML templating engine such as Eta, EJS, Handlebars, Nunjucks, LiquidJS and others without template loaders. This plugin have same as by pug-plugin:
What is NEW:
You can see usage examples in README. I will add the img(src=require("./logo.png"))
img(src=require("../images/logo.png"))
img(src=require("@image_alias/logo.png"))New syntax to resolve source files: img(src="./logo.png")
img(src="../images/logo.png")
img(src="@image_alias/logo.png")But, w/o require() is impossible the interpolation of a file path: - file = 'logo.png';
img(src=require(`../images/${file}`))Than do you think about? |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
It would be really awesome if you could add functionality similar to that of
html-loader.html-loaderparses the html and automatically adds assets as dependencies. Something similar should be possible for pug.TMK this happens on the basis of a list of tags and attributes that should be treated as assets.
Adding this functionality would eliminate the need to use require for assets making the DX even more awesome.
(parcel also does this. HTML as entypoint with automatic asset loading)
Using require for assets could ideally still be optionally possible.
Beta Was this translation helpful? Give feedback.
All reactions