Skip to content

Commit 2b76ff6

Browse files
ArnaudBarreArnaudBarre
committed
v0.5: Vite 5, ESM, drop support for now builtin ?inline [publish]
1 parent a1c224c commit 2b76ff6

17 files changed

+731
-296
lines changed

‎CHANGELOG.md

+6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# Changelog
22

3+
## 0.5.0
4+
5+
- Drop support for `?inline`, this now supported into core in v5
6+
- ESM only, requires node 18
7+
- Vite 5 as a peer deps
8+
39
## 0.4.0
410

511
Turn SVG into React components, even faster.

‎README.md

-2
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,10 @@ If you use a custom `.d.ts` file instead of `tsconfig.json` to include Vite Clie
4848

4949
```jsx
5050
import Logo from "./logo.svg";
51-
import base64Data from "./logo.svg?inline";
5251

5352
const Example = () => (
5453
<>
5554
<Logo />
56-
<img src={base64Data} alt="Logo" />
5755
</>
5856
);
5957
```

‎bun.lockb

21.8 KB
Binary file not shown.

‎package.json

+12-13
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
11
{
22
"name": "vite-plugin-fast-react-svg",
3-
"version": "0.4.0",
3+
"version": "0.5.0",
4+
"type": "module",
45
"license": "MIT",
56
"scripts": {
67
"build": "scripts/bundle.ts",
7-
"prettier": "yarn prettier-ci --write",
8+
"prettier": "bun prettier-ci --write",
89
"prettier-ci": "prettier --ignore-path=.gitignore --check '**/*.{ts,json,md,yml}'",
9-
"ci": "tsc && bun prettier-ci && bun run build"
10-
},
11-
"prettier": {
12-
"trailingComma": "all"
10+
"ci": "tsc && bun prettier-ci && bun run build && cd dist && publint"
1311
},
1412
"peerDependencies": {
1513
"react": ">=16",
16-
"vite": "^2 || ^3 || ^4"
14+
"vite": "^5"
1715
},
1816
"devDependencies": {
19-
"@nabla/tnode": "^0.8.0",
20-
"@types/node": "^18.11.11",
21-
"@types/react": "^18.0.26",
22-
"prettier": "^2.8.1",
23-
"typescript": "^4.9.3",
24-
"vite": "^4.0.0-beta.4"
17+
"@arnaud-barre/tnode": "^0.19.2",
18+
"@types/node": "^18.19.50",
19+
"@types/react": "^18.3.8",
20+
"prettier": "3.0.3",
21+
"publint": "^0.2.11",
22+
"typescript": "^5.6.2",
23+
"vite": "^5.4.7"
2524
}
2625
}

‎playground/bun.lockb

44.7 KB
Binary file not shown.

‎playground/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/playground/src/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + TS</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎playground/package.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "playground",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "tsc && vite build",
8+
"preview": "vite preview"
9+
},
10+
"dependencies": {
11+
"react": "^18.3.1",
12+
"react-dom": "^18.3.1"
13+
},
14+
"devDependencies": {
15+
"@types/react": "^18.3.8",
16+
"@types/react-dom": "^18.3.0",
17+
"@vitejs/plugin-react": "^4.3.1",
18+
"typescript": "^5.6.2",
19+
"vite": "^5.4.7"
20+
}
21+
}

‎playground/src/main.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { StrictMode } from "react";
2+
import { createRoot } from "react-dom/client";
3+
import ReactLogo from "./react.svg";
4+
import ViteLogo from "./vite.svg";
5+
import reactLogoSrc from "./react.svg?inline";
6+
import viteLogoSrc from "./vite.svg?inline";
7+
8+
createRoot(document.getElementById("root")!).render(
9+
<StrictMode>
10+
<img src={reactLogoSrc} />
11+
<img src={viteLogoSrc} />
12+
<ReactLogo />
13+
<ViteLogo />
14+
</StrictMode>,
15+
);

‎playground/src/react.svg

+5
Loading

‎playground/src/vite.svg

+1
Loading

‎playground/tsconfig.json

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"include": ["**/*.ts", "**/*.tsx"],
3+
"compilerOptions": {
4+
"target": "ES2021",
5+
"useDefineForClassFields": true,
6+
"jsx": "react-jsx",
7+
"module": "ESNext",
8+
"lib": ["ES2021", "DOM", "DOM.Iterable"],
9+
"types": ["vite/client"],
10+
11+
/* Bundler mode */
12+
"moduleResolution": "bundler",
13+
"allowImportingTsExtensions": true,
14+
"verbatimModuleSyntax": true,
15+
"noEmit": true,
16+
17+
/* Linting */
18+
"skipLibCheck": true,
19+
"strict": true,
20+
"noUnusedLocals": true,
21+
"noUnusedParameters": true,
22+
"noFallthroughCasesInSwitch": true,
23+
"useUnknownInCatchVariables": true,
24+
"noPropertyAccessFromIndexSignature": true
25+
}
26+
}

‎playground/vite.config.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { defineConfig, type Plugin } from "vite";
2+
import react from "@vitejs/plugin-react";
3+
import { svgPlugin } from "../src/index.ts";
4+
5+
// https://vitejs.dev/config/
6+
export default defineConfig({
7+
plugins: [react(), svgPlugin() as Plugin],
8+
});

‎scripts/bundle.ts

+15-5
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
#!/usr/bin/env tnode
2-
import { rmSync, writeFileSync } from "fs";
3-
import { execSync } from "child_process";
2+
import { execSync } from "node:child_process";
3+
import { rmSync, writeFileSync } from "node:fs";
44
import { build } from "esbuild";
55

6-
import * as packageJSON from "../package.json";
6+
import packageJSON from "../package.json";
77

88
rmSync("dist", { force: true, recursive: true });
99

1010
build({
1111
bundle: true,
1212
entryPoints: ["src/index.ts"],
1313
outdir: "dist",
14+
format: "esm",
1415
platform: "node",
15-
target: "node14",
16+
target: "node18",
1617
legalComments: "inline",
1718
external: Object.keys(packageJSON.peerDependencies),
1819
}).then(() => {
@@ -36,7 +37,16 @@ export declare const svgToJS: (svg: string, production: boolean) => string;
3637
author: "Arnaud Barré (https://github.com/ArnaudBarre)",
3738
license: packageJSON.license,
3839
repository: "github:ArnaudBarre/vite-plugin-fast-react-svg",
39-
main: "index.js",
40+
type: "module",
41+
exports: {
42+
".": {
43+
types: "./index.d.ts",
44+
import: "./index.js",
45+
},
46+
"./types": {
47+
types: "./types.d.ts",
48+
},
49+
},
4050
keywords: ["vite", "vite-plugin", "react", "svg"],
4151
peerDependencies: packageJSON.peerDependencies,
4252
},

‎src/index.ts

+2-8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { readFileSync } from "fs";
2-
import { Plugin } from "vite";
1+
import { readFileSync } from "node:fs";
2+
import type { Plugin } from "vite";
33

44
export function svgPlugin(): Plugin {
55
let production = false;
@@ -13,12 +13,6 @@ export function svgPlugin(): Plugin {
1313
if (id.endsWith(".svg")) {
1414
return svgToJS(readFileSync(id, "utf-8"), production);
1515
}
16-
if (id.endsWith(".svg?inline")) {
17-
const base64 = Buffer.from(
18-
readFileSync(id.replace("?inline", ""), "utf-8"),
19-
).toString("base64");
20-
return `export default "data:image/svg+xml;base64,${base64}"`;
21-
}
2216
},
2317
};
2418
}

‎tsconfig.json

+13-14
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
11
{
2-
"include": ["src"],
2+
"include": ["**/*.ts", "**/*.tsx"],
33
"compilerOptions": {
4-
/* Target node 14 */
5-
"module": "CommonJS",
6-
"lib": ["ES2020"],
7-
"target": "ES2020",
8-
"skipLibCheck": true,
4+
/* Target node 18 */
5+
"module": "NodeNext",
6+
"lib": ["ES2021"],
7+
"target": "ES2021",
98

10-
/* Transpile with esbuild */
9+
/* Bundler mode */
10+
"moduleResolution": "NodeNext",
11+
"allowImportingTsExtensions": true,
12+
"resolveJsonModule": true,
13+
"verbatimModuleSyntax": true,
1114
"noEmit": true,
12-
"isolatedModules": true,
13-
14-
/* Imports */
15-
"moduleResolution": "node", // Allow `index` imports
16-
"resolveJsonModule": true, // Allow json import
17-
"forceConsistentCasingInFileNames": true, // Avoid difference in case between file name and import
1815

1916
/* Linting */
17+
"skipLibCheck": true,
2018
"strict": true,
2119
"noUnusedLocals": true,
2220
"noUnusedParameters": true,
2321
"noFallthroughCasesInSwitch": true,
24-
"useUnknownInCatchVariables": true
22+
"useUnknownInCatchVariables": true,
23+
"noPropertyAccessFromIndexSignature": true
2524
}
2625
}

‎types.d.ts

-5
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,3 @@ declare module "*.svg" {
55
>;
66
export default ReactComponent;
77
}
8-
9-
declare module "*.svg?inline" {
10-
const data: string;
11-
export default data;
12-
}

0 commit comments

Comments
 (0)