@marko/vite 4.0.4 → 4.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -0
- package/dist/index.mjs +49 -1
- package/dist/relative-assets-transform.d.ts +2 -0
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -49,6 +49,21 @@ export default defineConfig({
|
|
|
49
49
|
});
|
|
50
50
|
```
|
|
51
51
|
|
|
52
|
+
# Browser asset references
|
|
53
|
+
|
|
54
|
+
With @marko/vite when a _static relative path_ is used for certain native tag attributes, the relative asset will be imported and processed by Vite.
|
|
55
|
+
|
|
56
|
+
As an example, with the following template, the `logo.svg` will be imported and processed as if it was a `import` at the root of the file.
|
|
57
|
+
|
|
58
|
+
```
|
|
59
|
+
<img src="./logo.svg">
|
|
60
|
+
|
|
61
|
+
// Would produce a Vite processed asset and update the src, eg with the following output
|
|
62
|
+
<img src="/assets/logo-TwEWmgMb.svg">
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
You can see the list of elements and their attributes which are processed [here](./src/relative-assets-transform.ts).
|
|
66
|
+
|
|
52
67
|
# Linked Mode
|
|
53
68
|
|
|
54
69
|
By default this plugin operates in `linked` mode (you can disabled this by passing [`linked: false` as an option](#options.linked)). In `linked` mode the plugin automatically discovers all of the entry `.marko` files while compiling the server, and tells `Vite` which modules to load in the browser.
|
package/dist/index.mjs
CHANGED
|
@@ -545,6 +545,53 @@ function renderAssetsCall(t2, slot) {
|
|
|
545
545
|
);
|
|
546
546
|
}
|
|
547
547
|
|
|
548
|
+
// src/relative-assets-transform.ts
|
|
549
|
+
var attrSrc = /* @__PURE__ */ new Set(["src"]);
|
|
550
|
+
var attrHref = /* @__PURE__ */ new Set(["href"]);
|
|
551
|
+
var assetAttrsByTag = /* @__PURE__ */ new Map([
|
|
552
|
+
["audio", attrSrc],
|
|
553
|
+
["embed", attrSrc],
|
|
554
|
+
["iframe", attrSrc],
|
|
555
|
+
["img", /* @__PURE__ */ new Set(["src", "srcset"])],
|
|
556
|
+
["input", attrSrc],
|
|
557
|
+
["source", attrSrc],
|
|
558
|
+
["track", attrSrc],
|
|
559
|
+
["video", /* @__PURE__ */ new Set(["src", "poster"])],
|
|
560
|
+
["a", attrHref],
|
|
561
|
+
["area", attrHref],
|
|
562
|
+
["link", attrHref],
|
|
563
|
+
["object", /* @__PURE__ */ new Set(["data"])],
|
|
564
|
+
["body", /* @__PURE__ */ new Set(["background"])]
|
|
565
|
+
]);
|
|
566
|
+
function transform(tag, t2) {
|
|
567
|
+
const { name, attributes } = tag.node;
|
|
568
|
+
if (name.type !== "StringLiteral") {
|
|
569
|
+
return;
|
|
570
|
+
}
|
|
571
|
+
const assetAttrs = assetAttrsByTag.get(name.value);
|
|
572
|
+
if (!assetAttrs) {
|
|
573
|
+
return;
|
|
574
|
+
}
|
|
575
|
+
for (const attr of attributes) {
|
|
576
|
+
if (attr.type === "MarkoAttribute" && attr.value.type === "StringLiteral" && assetAttrs.has(attr.name)) {
|
|
577
|
+
const { value } = attr.value;
|
|
578
|
+
if (!(value[0] === "/" || // Ignore absolute paths.
|
|
579
|
+
!/\.[^.]+$/.test(value) || // Ignore paths without a file extension.
|
|
580
|
+
/^[a-z]{2,}:/i.test(value))) {
|
|
581
|
+
const importedId = tag.scope.generateUid(value);
|
|
582
|
+
attr.value = t2.identifier(importedId);
|
|
583
|
+
tag.hub.file.path.unshiftContainer(
|
|
584
|
+
"body",
|
|
585
|
+
t2.importDeclaration(
|
|
586
|
+
[t2.importDefaultSpecifier(t2.identifier(importedId))],
|
|
587
|
+
t2.stringLiteral(value)
|
|
588
|
+
)
|
|
589
|
+
);
|
|
590
|
+
}
|
|
591
|
+
}
|
|
592
|
+
}
|
|
593
|
+
}
|
|
594
|
+
|
|
548
595
|
// src/read-once-persisted-store.ts
|
|
549
596
|
import os from "os";
|
|
550
597
|
import path4 from "path";
|
|
@@ -741,7 +788,8 @@ function markoPlugin(opts = {}) {
|
|
|
741
788
|
registeredTagLib = true;
|
|
742
789
|
compiler.taglib.register("@marko/vite", {
|
|
743
790
|
"<head>": { transformer: render_assets_transform_default },
|
|
744
|
-
"<body>": { transformer: render_assets_transform_default }
|
|
791
|
+
"<body>": { transformer: render_assets_transform_default },
|
|
792
|
+
"<*>": { transformer: transform }
|
|
745
793
|
});
|
|
746
794
|
}
|
|
747
795
|
const optimizeDeps = config.optimizeDeps ??= {};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@marko/vite",
|
|
3
3
|
"description": "A Marko plugin for Vite",
|
|
4
|
-
"version": "4.0
|
|
4
|
+
"version": "4.1.0",
|
|
5
5
|
"author": "Dylan Piercey <dpiercey@ebay.com>",
|
|
6
6
|
"bugs": "https://github.com/marko-js/vite/issues",
|
|
7
7
|
"dependencies": {
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"@types/babel__core": "^7.20.4",
|
|
22
22
|
"@types/jsdom": "^21.1.5",
|
|
23
23
|
"@types/mocha": "^10.0.4",
|
|
24
|
-
"@types/node": "^20.9.
|
|
24
|
+
"@types/node": "^20.9.1",
|
|
25
25
|
"@types/resolve": "^1.20.5",
|
|
26
26
|
"@types/serve-handler": "^6.1.4",
|
|
27
27
|
"@typescript-eslint/eslint-plugin": "^6.11.0",
|
|
@@ -38,12 +38,12 @@
|
|
|
38
38
|
"mocha": "^10.2.0",
|
|
39
39
|
"mocha-snap": "^5.0.0",
|
|
40
40
|
"nyc": "^15.1.0",
|
|
41
|
-
"playwright": "^1.
|
|
41
|
+
"playwright": "^1.40.0",
|
|
42
42
|
"prettier": "^3.1.0",
|
|
43
43
|
"serve-handler": "^6.1.5",
|
|
44
44
|
"tsx": "^4.1.2",
|
|
45
45
|
"typescript": "^5.2.2",
|
|
46
|
-
"vite": "^5.0.0
|
|
46
|
+
"vite": "^5.0.0"
|
|
47
47
|
},
|
|
48
48
|
"files": [
|
|
49
49
|
"dist",
|