v0.5: Vite 5, ESM, drop support for now builtin ?inline [publish]

ArnaudBarre · Sep 23, 2024 · abf86c0 · abf86c0
1 parent a1c224c
commit abf86c0
Show file tree

Hide file tree

Showing 18 changed files with 734 additions and 298 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -8,8 +8,8 @@ jobs:
     runs-on: ubuntu-latest
     if: ${{ contains(github.event.head_commit.message, '[publish]') }}
     steps:
-      - uses: actions/checkout@v3
-      - uses: xhyrom/setup-bun@v0.1.8
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v2
       - run: bun i
       - run: bun ci
       - uses: ArnaudBarre/npm-publish@v1

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.5.0
+
+- Drop support for `?inline`, this now supported into core in v5
+- ESM only, requires node 18
+- Vite 5 as a peer deps
+
 ## 0.4.0
 
 Turn SVG into React components, even faster.

diff --git a/README.md b/README.md
@@ -48,12 +48,10 @@ If you use a custom `.d.ts` file instead of `tsconfig.json` to include Vite Clie
 
 ```jsx
 import Logo from "./logo.svg";
-import base64Data from "./logo.svg?inline";
 
 const Example = () => (
   <>
     <Logo />
-    <img src={base64Data} alt="Logo" />
   </>
 );
 ```
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -1,26 +1,25 @@
 {
   "name": "vite-plugin-fast-react-svg",
-  "version": "0.4.0",
+  "version": "0.5.0",
+  "type": "module",
   "license": "MIT",
   "scripts": {
     "build": "scripts/bundle.ts",
-    "prettier": "yarn prettier-ci --write",
+    "prettier": "bun prettier-ci --write",
     "prettier-ci": "prettier --ignore-path=.gitignore --check '**/*.{ts,json,md,yml}'",
-    "ci": "tsc && bun prettier-ci && bun run build"
-  },
-  "prettier": {
-    "trailingComma": "all"
+    "ci": "tsc && bun prettier-ci && bun run build && cd dist && publint"
   },
   "peerDependencies": {
     "react": ">=16",
-    "vite": "^2 || ^3 || ^4"
+    "vite": "^5"
   },
   "devDependencies": {
-    "@nabla/tnode": "^0.8.0",
-    "@types/node": "^18.11.11",
-    "@types/react": "^18.0.26",
-    "prettier": "^2.8.1",
-    "typescript": "^4.9.3",
-    "vite": "^4.0.0-beta.4"
+    "@arnaud-barre/tnode": "^0.19.2",
+    "@types/node": "^18.19.50",
+    "@types/react": "^18.3.8",
+    "prettier": "3.0.3",
+    "publint": "^0.2.11",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.7"
   }
 }
diff --git a/playground/bun.lockb b/playground/bun.lockb
diff --git a/playground/index.html b/playground/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/playground/src/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/playground/package.json b/playground/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "playground",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.8",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.7"
+  }
+}
diff --git a/playground/src/main.tsx b/playground/src/main.tsx
@@ -0,0 +1,15 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import ReactLogo from "./react.svg";
+import ViteLogo from "./vite.svg";
+import reactLogoSrc from "./react.svg?inline";
+import viteLogoSrc from "./vite.svg?inline";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <img src={reactLogoSrc} />
+    <img src={viteLogoSrc} />
+    <ReactLogo />
+    <ViteLogo />
+  </StrictMode>,
+);
diff --git a/playground/src/react.svg b/playground/src/react.svg
diff --git a/playground/src/vite.svg b/playground/src/vite.svg
diff --git a/playground/tsconfig.json b/playground/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "target": "ES2021",
+    "useDefineForClassFields": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "lib": ["ES2021", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    /* Linting */
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "useUnknownInCatchVariables": true,
+    "noPropertyAccessFromIndexSignature": true
+  }
+}
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig, type Plugin } from "vite";
+import react from "@vitejs/plugin-react";
+import { svgPlugin } from "../src/index.ts";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), svgPlugin() as Plugin],
+});
diff --git a/scripts/bundle.ts b/scripts/bundle.ts
@@ -1,18 +1,19 @@
 #!/usr/bin/env tnode
-import { rmSync, writeFileSync } from "fs";
-import { execSync } from "child_process";
+import { execSync } from "node:child_process";
+import { rmSync, writeFileSync } from "node:fs";
 import { build } from "esbuild";
 
-import * as packageJSON from "../package.json";
+import packageJSON from "../package.json";
 
 rmSync("dist", { force: true, recursive: true });
 
 build({
   bundle: true,
   entryPoints: ["src/index.ts"],
   outdir: "dist",
+  format: "esm",
   platform: "node",
-  target: "node14",
+  target: "node18",
   legalComments: "inline",
   external: Object.keys(packageJSON.peerDependencies),
 }).then(() => {
@@ -36,7 +37,16 @@ export declare const svgToJS: (svg: string, production: boolean) => string;
         author: "Arnaud Barré (https://github.com/ArnaudBarre)",
         license: packageJSON.license,
         repository: "github:ArnaudBarre/vite-plugin-fast-react-svg",
-        main: "index.js",
+        type: "module",
+        exports: {
+          ".": {
+            types: "./index.d.ts",
+            import: "./index.js",
+          },
+          "./types": {
+            types: "./types.d.ts",
+          },
+        },
         keywords: ["vite", "vite-plugin", "react", "svg"],
         peerDependencies: packageJSON.peerDependencies,
       },

diff --git a/src/index.ts b/src/index.ts
@@ -1,5 +1,5 @@
-import { readFileSync } from "fs";
-import { Plugin } from "vite";
+import { readFileSync } from "node:fs";
+import type { Plugin } from "vite";
 
 export function svgPlugin(): Plugin {
   let production = false;
@@ -13,12 +13,6 @@ export function svgPlugin(): Plugin {
       if (id.endsWith(".svg")) {
         return svgToJS(readFileSync(id, "utf-8"), production);
       }
-      if (id.endsWith(".svg?inline")) {
-        const base64 = Buffer.from(
-          readFileSync(id.replace("?inline", ""), "utf-8"),
-        ).toString("base64");
-        return `export default "data:image/svg+xml;base64,${base64}"`;
-      }
     },
   };
 }

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,26 +1,26 @@
 {
-  "include": ["src"],
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["playground"],
   "compilerOptions": {
-    /* Target node 14 */
-    "module": "CommonJS",
-    "lib": ["ES2020"],
-    "target": "ES2020",
-    "skipLibCheck": true,
+    /* Target node 18 */
+    "module": "NodeNext",
+    "lib": ["ES2021"],
+    "target": "ES2021",
 
-    /* Transpile with esbuild */
+    /* Bundler mode */
+    "moduleResolution": "NodeNext",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "verbatimModuleSyntax": true,
     "noEmit": true,
-    "isolatedModules": true,
-
-    /* Imports */
-    "moduleResolution": "node", // Allow `index` imports
-    "resolveJsonModule": true, // Allow json import
-    "forceConsistentCasingInFileNames": true, // Avoid difference in case between file name and import
 
     /* Linting */
+    "skipLibCheck": true,
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "useUnknownInCatchVariables": true
+    "useUnknownInCatchVariables": true,
+    "noPropertyAccessFromIndexSignature": true
   }
 }
diff --git a/types.d.ts b/types.d.ts
@@ -5,8 +5,3 @@ declare module "*.svg" {
   >;
   export default ReactComponent;
 }
-
-declare module "*.svg?inline" {
-  const data: string;
-  export default data;
-}