feat(vite-plugin): add vite plugin

.changeset/nasty-icons-shake.md

@@ -0,0 +1,5 @@
+---
+"@suid/vite-plugin": patch
+---
+
+Add SUID integration plugin for Vite

.npmrc

@@ -0,0 +1 @@
+auto-install-peers=true

README.md

@@ -22,6 +22,7 @@ With this smart target in mind, the project avoids becoming another library that
 | [@suid/material](/packages/material)             |    ![material-npm]    | A port of Material-UI (MUI) built with SolidJS.    |
 | [@suid/icons-material](/packages/icons-material) | ![icons-material-npm] | Material Design icons as SVG SolidJS components.   |
 | [@suid/codemod](/packages/codemod)               |    ![codemod-npm]     | Tool for migrating MUI React code to SUID SolidJS. |
+| [@suid/vite-plugin](/packages/vite-plugin)       |  ![vite-plugin-npm]   | SUID integration plugin for Vite.                  |
 | [@suid/styled-engine](/packages/styled-engine)   | ![styled-engine-npm]  | Styled engine used by @suid/system.                |
 | [@suid/system](/packages/system)                 |     ![system-npm]     | Styles system used by suid packages.               |
 | [@suid/base](/packages/base)                     |      ![base-npm]      | Unstyled base components used by @suid/material.   |
@@ -32,6 +33,7 @@ With this smart target in mind, the project avoids becoming another library that
 [material-npm]: https://img.shields.io/npm/v/@suid/material
 [icons-material-npm]: https://img.shields.io/npm/v/@suid/icons-material
 [codemod-npm]: https://img.shields.io/npm/v/@suid/codemod
+[vite-plugin-npm]: https://img.shields.io/npm/v/@suid/vite-plugin
 [styled-engine-npm]: https://img.shields.io/npm/v/@suid/styled-engine
 [site-npm]: https://img.shields.io/npm/v/@suid/site
 [css-npm]: https://img.shields.io/npm/v/@suid/css

package.json

@@ -36,9 +36,10 @@
     }
   ],
   "scripts": {
-    "build": "pnpm scripts prebuild && pnpm build:ts && pnpm build:site",
+    "build": "pnpm scripts prebuild && pnpm build:ts && pnpm build:vite-plugin && pnpm build:site",
     "build:site": "pnpm --filter @suid/site build && wspa compose -p @suid/site",
     "build:ts": "tsc --build tsconfig.build.json",
+    "build:vite-plugin": "pnpm --filter @suid/vite-plugin build && wspa compose -p @suid/vite-plugin",
     "changeset": "changeset",
     "check": "pnpm check:format && pnpm check:lint",
     "check:format": "prettier --cache -c .",

packages/vite-plugin/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 Juanra GM <[email protected]>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/vite-plugin/README.md

@@ -0,0 +1,34 @@
+# @suid/vite-plugin
+
+![GitHub Workflow Status](https://img.shields.io/github/workflow/status/swordev/suid/CI) ![npm (scoped)](https://img.shields.io/npm/v/@suid/vite-plugin?label=@suid/vite-plugin)
+
+## Features
+
+- Optimizes the material icon imports:
+  ```ts
+  import { Wifi } from "@suid/material-icons"; // input
+  import Wifi from "@suid/material-icons/Wifi"; // output
+  ```
+
+## Installation
+
+```sh
+npm install @suid/vite-plugin
+```
+
+## Usage
+
+```ts
+// vite.config.ts
+import suidPlugin from "@suid/vite-plugin";
+import { defineConfig } from "vite";
+import solidPlugin from "vite-plugin-solid";
+
+export default defineConfig({
+  plugins: [suidPlugin(), solidPlugin()],
+});
+```
+
+## License
+
+Distributed under the MIT License. See LICENSE for more information.

packages/vite-plugin/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@suid/vite-plugin",
+  "version": "0.0.1",
+  "description": "SUID integration plugin for Vite.",
+  "keywords": [
+    "vite",
+    "plugin",
+    "suid",
+    "solidjs"
+  ],
+  "type": "module",
+  "main": "index.cjs",
+  "module": "index.mjs",
+  "types": "index.d.ts",
+  "scripts": {
+    "build": "pnpm build:types && pnpm build:cjs && pnpm build:esm",
+    "build:cjs": "esbuild --format=cjs --outfile=dist/index.cjs src/index.ts",
+    "build:esm": "esbuild --format=esm --outfile=dist/index.mjs src/index.ts",
+    "build:types": "tsc --emitDeclarationOnly --declarationMap false --outdir dist --declaration"
+  },
+  "dependencies": {
+    "@babel/generator": "^7.19.0",
+    "@babel/parser": "^7.19.0",
+    "@babel/traverse": "^7.19.0",
+    "@babel/types": "^7.19.0"
+  },
+  "devDependencies": {
+    "esbuild": "^0.15.7"
+  },
+  "peerDependencies": {
+    "vite": "^3.0.0"
+  },
+  "publishConfig": {
+    "directory": "dist"
+  },
+  "x-wspa": {
+    "pkgManifest": {
+      "files": [
+        "**/*.cjs",
+        "**/*.mjs",
+        "**/*.d.ts"
+      ]
+    }
+  }
+}

packages/vite-plugin/src/index.ts

@@ -0,0 +1,113 @@
+import $generate from "@babel/generator";
+import { parse, ParserOptions } from "@babel/parser";
+import $traverse from "@babel/traverse";
+import * as types from "@babel/types";
+import type { Plugin } from "vite";
+
+// https://github.com/babel/babel/issues/13855
+const traverse: typeof $traverse = ($traverse as any).default;
+const generate: typeof $generate = ($generate as any).default;
+
+type SuidPluginOptions = {
+  optimizeImports?: {
+    /**
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * @default ["@suid/icons-material"]
+     */
+    paths?: string[];
+  };
+  parserOptions?: ParserOptions;
+};
+
+const defaultOptions: SuidPluginOptions = {
+  optimizeImports: {
+    enabled: true,
+    paths: ["@suid/icons-material"],
+  },
+  parserOptions: {
+    sourceType: "module",
+    plugins: ["jsx", "typescript"],
+  },
+};
+
+export default function suidPlugin(inOptions: SuidPluginOptions = {}): Plugin {
+  const options: SuidPluginOptions = {
+    ...defaultOptions,
+    ...inOptions,
+    parserOptions: {
+      ...defaultOptions.parserOptions,
+      ...inOptions.parserOptions,
+    },
+    optimizeImports: {
+      ...defaultOptions.optimizeImports,
+      ...inOptions.optimizeImports,
+    },
+  };
+  return {
+    name: "suid",
+    transform(code) {
+      const transformIconImportsOptions = options.optimizeImports || {};
+      if (
+        transformIconImportsOptions.enabled &&
+        transformIconImportsOptions.paths?.some((p) => code.includes(p))
+      ) {
+        return transformIconImports(code, options);
+      }
+    },
+  };
+}
+
+export function transformIconImports(
+  code: string,
+  options: SuidPluginOptions
+): string {
+  const ast = parse(code, options.parserOptions);
+
+  traverse(ast, {
+    enter(path) {
+      const { node } = path;
+
+      const optimize =
+        types.isImportDeclaration(node) &&
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        options.optimizeImports!.paths!.some((v) => v === node.source.value);
+
+      if (!optimize) return;
+
+      const declarations = node.specifiers
+        .map((spec) => {
+          if (
+            types.isImportSpecifier(spec) &&
+            types.isIdentifier(spec.imported) &&
+            types.isIdentifier(spec.local)
+          ) {
+            return {
+              importDefaultSpecifier: spec.local.name,
+              importPath: `${node.source.value}/${spec.imported.name}`,
+            };
+          }
+        })
+        .filter((v) => !!v) as {
+        importDefaultSpecifier: string;
+        importPath: string;
+      }[];
+
+      path.replaceWithMultiple(
+        declarations.map((spec) =>
+          types.importDeclaration(
+            [
+              types.importDefaultSpecifier(
+                types.identifier(spec.importDefaultSpecifier)
+              ),
+            ],
+            types.stringLiteral(spec.importPath)
+          )
+        )
+      );
+    },
+  });
+  return generate(ast).code;
+}

packages/vite-plugin/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": { "outDir": "dist", "rootDir": "src", "paths": {} },
+  "exclude": ["src/**/*.test.*"],
+  "extends": "./../../tsconfig.json",
+  "include": ["src/**/*"],
+  "references": []
+}