@marko/vite 4.0.3 → 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 +55 -3
- 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
|
@@ -313,12 +313,16 @@ function esbuildPlugin(compiler, config) {
|
|
|
313
313
|
const virtualFiles2 = /* @__PURE__ */ new Map();
|
|
314
314
|
const finalConfig = {
|
|
315
315
|
...config,
|
|
316
|
-
output:
|
|
316
|
+
output: platform === "browser" ? "dom" : "html",
|
|
317
317
|
resolveVirtualDependency(from, dep) {
|
|
318
318
|
virtualFiles2.set(path2.join(from, "..", dep.virtualPath), dep);
|
|
319
319
|
return dep.virtualPath;
|
|
320
320
|
}
|
|
321
321
|
};
|
|
322
|
+
const scanConfig = {
|
|
323
|
+
...finalConfig,
|
|
324
|
+
output: "hydrate"
|
|
325
|
+
};
|
|
322
326
|
build.onResolve({ filter: /\.marko\./ }, (args) => {
|
|
323
327
|
return {
|
|
324
328
|
namespace: "marko:virtual",
|
|
@@ -337,7 +341,7 @@ function esbuildPlugin(compiler, config) {
|
|
|
337
341
|
try {
|
|
338
342
|
const { code, meta } = await compiler.compileFile(
|
|
339
343
|
args.path,
|
|
340
|
-
finalConfig
|
|
344
|
+
isScan && args.namespace === "" ? scanConfig : finalConfig
|
|
341
345
|
);
|
|
342
346
|
return {
|
|
343
347
|
loader: "js",
|
|
@@ -541,6 +545,53 @@ function renderAssetsCall(t2, slot) {
|
|
|
541
545
|
);
|
|
542
546
|
}
|
|
543
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
|
+
|
|
544
595
|
// src/read-once-persisted-store.ts
|
|
545
596
|
import os from "os";
|
|
546
597
|
import path4 from "path";
|
|
@@ -737,7 +788,8 @@ function markoPlugin(opts = {}) {
|
|
|
737
788
|
registeredTagLib = true;
|
|
738
789
|
compiler.taglib.register("@marko/vite", {
|
|
739
790
|
"<head>": { transformer: render_assets_transform_default },
|
|
740
|
-
"<body>": { transformer: render_assets_transform_default }
|
|
791
|
+
"<body>": { transformer: render_assets_transform_default },
|
|
792
|
+
"<*>": { transformer: transform }
|
|
741
793
|
});
|
|
742
794
|
}
|
|
743
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",
|