Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vite 4.0 support #192

Closed
haltcase opened this issue Feb 10, 2023 · 9 comments
Closed

Vite 4.0 support #192

haltcase opened this issue Feb 10, 2023 · 9 comments

Comments

@haltcase
Copy link

I've installed this to use it with Vite 4.0 but doing so requires using npm's --legacy-peer-deps flag to bypass errors. I'm not familiar with plugin interface changes between Vite 3 and 4, so I don't know if it's as simple as updating the peer dep range. However, it seems to be working in my testing so far.

"peerDependencies": {
"vite": "2.x || 3.x"
}

I'd be willing to open a PR for this change.

@bienzaaron
Copy link
Owner

As far as I can tell, the only change would be updating the peer dep range. A PR would be welcome 🙂

@bienzaaron
Copy link
Owner

I think rollup will need bumped to 3.x alongside vite 4.x.

@bienzaaron
Copy link
Owner

released in v2.2.0

@haltcase
Copy link
Author

haltcase commented Mar 3, 2023

I'm not so sure this is fixed. Production builds still fail, I think because Vite does not expose Rollup's context.load method.

rendering chunks (6)...[vite:build-html] ctx.load is not a function
error during build:
TypeError: ctx.load is not a function
    at /workspaces/project/node_modules/vite-plugin-inline-source/dist/index.js:43:28
    at transformIndexHtml (/workspaces/project/node_modules/vite-plugin-inline-source/dist/index.js:73:20)
    at applyHtmlTransforms (file:///workspaces/project/node_modules/vite/dist/node/chunks/dep-3007b26d.js:35968:27)
    at Object.generateBundle (file:///workspaces/project/node_modules/vite/dist/node/chunks/dep-3007b26d.js:35875:32)
    at file:///workspaces/project/node_modules/rollup/dist/es/shared/rollup.js:23891:40
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

For what it's worth, I had started a PR to fix this but ran into issues related to missing test files and such that are not committed to version control. I settled for using patch-package with the following diff:

patch diff
diff --git a/node_modules/vite-plugin-inline-source/dist/index.js b/node_modules/vite-plugin-inline-source/dist/index.js
index 3dafedb..dc210cf 100644
--- a/node_modules/vite-plugin-inline-source/dist/index.js
+++ b/node_modules/vite-plugin-inline-source/dist/index.js
@@ -21,7 +21,7 @@ const InlineSourceOptionsSchema = zod_1.default
 })
     .default({});
 const PATTERN = /<([A-z0-9-]+)\s+([^>]*?)src\s*=\s*"([^>]*?)"([^>]*?)\s*((\/>)|(>\s*<\/\s*\1\s*>))/gi;
-const getTransformFunction = (options) => async (source, ctx, id) => {
+const getTransformFunction = (options) => async (source, ctx, id, root) => {
     if (id && !id.endsWith(".html")) {
         return source;
     }
@@ -37,11 +37,11 @@ const getTransformFunction = (options) => async (source, ctx, id) => {
         if ((isImg && !isSvgFile) || !shouldInline) {
             continue;
         }
-        let fileContent = ctx.server
-            ? (await (0, promises_1.readFile)(`${ctx.server.config.root}/${fileName}`)).toString()
-            : // @ts-expect-error don't know these types aren't right
-                (await ctx.load({ id: `${fileName}?raw` })).ast?.body?.[0].declaration
-                    .value;
+
+        const projectRoot = root ?? ctx.server.config.root ?? "";
+        const filePath = node_path_1.default.join(projectRoot, fileName);
+
+        let fileContent = (await (0, promises_1.readFile)(filePath)).toString();
         if (isSvgFile && options.optimizeSvgs) {
             fileContent = (0, svgo_1.optimize)(fileContent, options.svgoOptions).data;
         }
@@ -64,13 +64,18 @@ const getTransformFunction = (options) => async (source, ctx, id) => {
 };
 function VitePluginInlineSource(opts) {
     const transformHtml = getTransformFunction(InlineSourceOptionsSchema.parse(opts));
+    let root;
+
     return {
         name: "vite-plugin-inline-source",
+        configResolved(ctx) {
+            root = ctx.root;
+        },
         transform(source, id) {
             return transformHtml(source, this, id);
         },
-        transformIndexHtml(source, ctx) {
-            return transformHtml(source, ctx);
+        async transformIndexHtml(source, ctx) {
+            return transformHtml(source, ctx, undefined, root);
         },
     };
 }

@bienzaaron
Copy link
Owner

Curious if you have a reproduction? I'm using it just fine with Vite 4 in a couple projects with no issues accessing Rollup's context.load. There's also a super simple stackblitz in the readme, can run build there with no problems.

I'm also curious as to what errors you're getting with the tests.
running:

mkdir scratch && cd scratch
git clone https://github.com/bienzaaron/vite-plugin-inline-source.git
cd vite-plugin-inline-source
npm i && npm run test

works fine for me on Mac. Produces the following output:

❯ mkdir scratch && cd scratch
git clone https://github.com/bienzaaron/vite-plugin-inline-source.git
cd vite-plugin-inline-source
npm i && npm run test
Cloning into 'vite-plugin-inline-source'...
remote: Enumerating objects: 502, done.
remote: Counting objects: 100% (241/241), done.
remote: Compressing objects: 100% (42/42), done.
remote: Total 502 (delta 221), reused 213 (delta 198), pack-reused 261
Receiving objects: 100% (502/502), 315.61 KiB | 6.44 MiB/s, done.
Resolving deltas: 100% (303/303), done.

added 270 packages, and audited 271 packages in 2s

67 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

> vite-plugin-inline-source@2.2.0 test
> vitest run --coverage


 RUN  v0.29.2 /Users/ajb/scratch/scratch/vite-plugin-inline-source
      Coverage enabled with c8

stdout | src/__tests__/index.spec.ts > it then inlines css and preserves style tags
vite v4.1.4 building for production...

stdout | src/__tests__/index.spec.ts > it then inlines css and preserves style tags
transforming...

stderr | src/__tests__/index.spec.ts > it then inlines css and preserves style tags
Generated an empty chunk: "index".

stdout | src/__tests__/index.spec.ts > it then inlines css and preserves style tags
✓ 3 modules transformed.

stderr | src/__tests__/index.spec.ts > it then inlines css and preserves style tags
<empty line>
stdout | src/__tests__/index.spec.ts > it then inlines css and preserves style tags
rendering chunks...

stderr | src/__tests__/index.spec.ts > it then inlines css and preserves style tags
<empty line>
stdout | src/__tests__/index.spec.ts > it then inlines css and preserves style tags
computing gzip size...

stderr | src/__tests__/index.spec.ts > it then inlines css and preserves style tags
<empty line>
stdout | src/__tests__/index.spec.ts > it then inlines css and preserves style tags
dist/index.html  0.11 kB
dist/style.css   0.03 kB │ gzip: 0.05 kB

stdout | src/__tests__/index.spec.ts > it then doesn't mess with tags it shouldn't mess with
vite v4.1.4 building for production...

stdout | src/__tests__/index.spec.ts > it then doesn't mess with tags it shouldn't mess with
transforming...

stderr | src/__tests__/index.spec.ts > it then doesn't mess with tags it shouldn't mess with
Generated an empty chunk: "index".

stdout | src/__tests__/index.spec.ts > it then doesn't mess with tags it shouldn't mess with
✓ 3 modules transformed.
rendering chunks...

stderr | src/__tests__/index.spec.ts > it then doesn't mess with tags it shouldn't mess with
<empty line>
stdout | src/__tests__/index.spec.ts > it then doesn't mess with tags it shouldn't mess with
computing gzip size...
dist/index.html  0.13 kB
dist/style.css   0.03 kB │ gzip: 0.05 kB

stdout | src/__tests__/index.spec.ts > it then inlines svg
vite v4.1.4 building for production...

stderr | src/__tests__/index.spec.ts > it then inlines svg
Generated an empty chunk: "index".

stdout | src/__tests__/index.spec.ts > it then inlines svg
transforming...
✓ 2 modules transformed.

stderr | src/__tests__/index.spec.ts > it then inlines svg
<empty line>
stdout | src/__tests__/index.spec.ts > it then inlines svg
rendering chunks...
dist/i-am-an-svg.svg  0.07 kB
dist/index.html       0.10 kB

stdout | src/__tests__/index.spec.ts > it then optimizes svg with default options
vite v4.1.4 building for production...

stderr | src/__tests__/index.spec.ts > it then optimizes svg with default options
Generated an empty chunk: "index".

stdout | src/__tests__/index.spec.ts > it then optimizes svg with default options
transforming...
✓ 2 modules transformed.
rendering chunks...

stderr | src/__tests__/index.spec.ts > it then optimizes svg with default options
<empty line>
stdout | src/__tests__/index.spec.ts > it then optimizes svg with default options
dist/i-am-an-svg.svg  0.07 kB
dist/index.html       0.10 kB

stdout | src/__tests__/index.spec.ts > it then optimizes svg with custom options
vite v4.1.4 building for production...
vite v4.1.4 building for production...

stderr | src/__tests__/index.spec.ts > it then optimizes svg with custom options
[vite-plugin-inline-source] <input>:1:35: Attribute without value
file: /Users/ajb/scratch/scratch/vite-plugin-inline-source/src/__tests__/index.html

stdout | src/__tests__/index.spec.ts > it then optimizes svg with custom options
transforming...
✓ 1 modules transformed.

stdout | src/__tests__/index.spec.ts > it then optimizes svg with custom options
transforming...
✓ 2 modules transformed.
rendering chunks...

stderr | src/__tests__/index.spec.ts > it then optimizes svg with custom options
Generated an empty chunk: "index".

stderr | src/__tests__/index.spec.ts > it then optimizes svg with custom options
<empty line>
stdout | src/__tests__/index.spec.ts > it then optimizes svg with custom options
dist/index.html       0.10 kB
dist/i-am-an-svg.svg  0.18 kB

stdout | src/__tests__/index.spec.ts > custom replaceTags
vite v4.1.4 building for production...

stderr | src/__tests__/index.spec.ts > custom replaceTags
Generated an empty chunk: "index".

stdout | src/__tests__/index.spec.ts > custom replaceTags
transforming...
✓ 2 modules transformed.
rendering chunks...

stderr | src/__tests__/index.spec.ts > custom replaceTags
<empty line>
stdout | src/__tests__/index.spec.ts > custom replaceTags
dist/abc.html    0.01 kB
dist/index.html  0.02 kB

 ✓ src/__tests__/index.spec.ts (7)

 Test Files  1 passed (1)
      Tests  7 passed (7)
   Start at  13:56:22
   Duration  435ms (transform 50ms, setup 0ms, collect 158ms, tests 107ms)

JSON report written to /Users/ajb/scratch/scratch/vite-plugin-inline-source/test-report.json
 % Coverage report from c8
----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files |       0 |        0 |       0 |       0 |
----------|---------|----------|---------|---------|-------------------

@bienzaaron
Copy link
Owner

Though I do see vitejs/vite#11469, which would imply that it shouldn't be accessible from the plugin context 🤔

@bienzaaron bienzaaron reopened this Mar 3, 2023
@haltcase
Copy link
Author

haltcase commented Mar 3, 2023

I'm trying to replicate my exact error on Stackblitz. I haven't quite gotten there, but was able to at least demonstrate what seems to be an issue with resolving files when there's a custom root defined:

https://stackblitz.com/edit/vite-ysw8ui?file=vite.config.js

Dev seems to work, but a production build will fail.

@bienzaaron
Copy link
Owner

custom roots should work with v2.2.2

@haltcase
Copy link
Author

haltcase commented May 30, 2023

@bienzaaron unfortunately, v2.2.2 doesn't resolve this for me and still requires my patch mentioned here that removes the use of ctx.load.

I had started working on a PR to incorporate it, but since I'm not familiar with Vite's asset pipeline I struggled with the tests. Either the tests generate files in a different way than the normal Vite processes or my patch is only a partial solution (though it works in both dev & production for me).

rendering chunks (6)...[vite:build-html] ctx.load is not a function
error during build:
TypeError: ctx.load is not a function
    at transformHtml (/workspaces/project/node_modules/vite-plugin-inline-source/dist/index.js:47:32)
    at transformIndexHtml (/workspaces/project/node_modules/vite-plugin-inline-source/dist/index.js:78:20)
    at applyHtmlTransforms (file:///workspaces/project/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:37685:27)
    at Object.generateBundle (file:///workspaces/project/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:37559:32)
    at file:///workspaces/project/node_modules/rollup/dist/es/shared/node-entry.js:24551:40
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants