{"id":16886095,"url":"https://github.com/vdustr/unplugin-transform-imports","last_synced_at":"2025-04-11T12:37:37.484Z","repository":{"id":57689883,"uuid":"473672292","full_name":"VdustR/unplugin-transform-imports","owner":"VdustR","description":"An imports transform unplugin.","archived":false,"fork":false,"pushed_at":"2023-10-17T22:40:10.000Z","size":912,"stargazers_count":8,"open_issues_count":4,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-18T15:45:08.370Z","etag":null,"topics":["esbuild","icon","import","lodash","rollup","transform","tree-shaking","unplugin","vite","webpack"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/unplugin-transform-imports","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/VdustR.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-24T15:48:54.000Z","updated_at":"2023-12-05T06:29:44.000Z","dependencies_parsed_at":"2025-02-19T10:46:18.694Z","dependency_job_id":null,"html_url":"https://github.com/VdustR/unplugin-transform-imports","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VdustR%2Funplugin-transform-imports","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VdustR%2Funplugin-transform-imports/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VdustR%2Funplugin-transform-imports/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VdustR%2Funplugin-transform-imports/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VdustR","download_url":"https://codeload.github.com/VdustR/unplugin-transform-imports/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248402427,"owners_count":21097329,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["esbuild","icon","import","lodash","rollup","transform","tree-shaking","unplugin","vite","webpack"],"created_at":"2024-10-13T16:38:17.444Z","updated_at":"2025-04-11T12:37:37.436Z","avatar_url":"https://github.com/VdustR.png","language":"TypeScript","readme":"# `unplugin-transform-imports`\n\n[![NPM Publish](https://github.com/VdustR/unplugin-transform-imports/actions/workflows/build.yml/badge.svg)](https://github.com/VdustR/unplugin-transform-imports/actions/workflows/build.yml)\n\nAn imports transform [unplugin](https://github.com/unjs/unplugin) based on [babel](https://github.com/babel/babel) inspired by [`babel-plugin-transform-imports`](https://www.npmjs.com/package/babel-plugin-transform-imports).\n\n## What `unplugin-transform-imports` Do?\n\nTransform the imports from:\n\n```ts\nimport { Check as MdiCheck } from \"mdi-material-ui\";\nimport { Check as MuiCheck, CheckBox } from \"@mui/icons-material\";\nimport { Check as PhCheck } from \"phosphor-react\";\nimport { merge } from \"lodash\";\n```\n\nto:\n\n```ts\nimport MdiCheck from \"mdi-material-ui/Check\";\nimport MuiCheck from \"@mui/icons-material/Check\";\nimport CheckBox from \"@mui/icons-material/CheckBox\";\nimport PhCheck from \"phosphor-react/dist/icons/Check\";\nimport merge from \"lodash/merge\";\n```\n\n## Why `unplugin-transform-imports`?\n\n### Better Development Performance\n\n\u003e Development bundles can contain the full library which can lead to slower startup times. This is especially noticeable if you import from @mui/icons-material. Startup times can be approximately 6x slower than without named imports from the top-level API.\n\n- Reference from [MUI Minimizing bundle size #Development environment](https://mui.com/guides/minimizing-bundle-size/#development-environment)\n\nYou can save a lot of time if you use webpack.\n\nThere are rough test results with [`demo-craco`](https://github.com/VdustR/unplugin-transform-imports/blob/main/packages/demo-craco) on my device:\n\n```bash\n# without unplugin-transform-imports\n$ pnpm start\nwebpack 5.70.0 compiled successfully in 22427 ms\n\n# with unplugin-transform-imports\n$ pnpm start\nwebpack 5.70.0 compiled successfully in 3313 ms\n```\n\n### Tree-shaking Alternative\n\nYou can also use it as tree-shaking alternative for modules which is not using ESM like lodash.\n\n[`demo-craco`](https://github.com/VdustR/unplugin-transform-imports/blob/main/packages/demo-craco):\n\n```bash\n# without unplugin-transform-imports\n$ du -h --max-depth=0 build\n1.6M    build\n\n# with unplugin-transform-imports\n$ du -h --max-depth=0 build\n980K   build\n```\n\n[`demo-vite`](https://github.com/VdustR/unplugin-transform-imports/blob/main/packages/demo-vite):\n\n```bash\n# without unplugin-transform-imports\ndu -h --max-depth=0 dist\n280K    dist\n\n# with unplugin-transform-imports\ndu -h --max-depth=0 dist\n220K    dist\n```\n\n## How To Use `unplugin-transform-imports`\n\nInstall:\n\n```sh\nnpm i -D unplugin-transform-imports\nyarn add -D unplugin-transform-imports\npnpm i -D unplugin-transform-imports\n```\n\nUsage:\n\n```ts\nimport transformImports from \"unplugin-transform-imports\";\n\n// webpack\ntransformImports.webpack(transformImportsOptions);\n\n// vite\ntransformImports.vite(transformImportsOptions);\n\n// rollup\ntransformImports.rollup(transformImportsOptions);\n\n// esbuild\ntransformImports.esbuild(transformImportsOptions);\n```\n\nYou can check the demo for `craco` and `vite`:\n\n- [`demo-craco`](https://github.com/VdustR/unplugin-transform-imports/blob/main/packages/demo-craco)\n- [`demo-vite-react`](https://github.com/VdustR/unplugin-transform-imports/blob/main/packages/demo-vite)\n- [`demo-vite-vue`](https://github.com/VdustR/unplugin-transform-imports/blob/main/packages/demo-vite-vue)\n- [`demo-vite-svelte`](https://github.com/VdustR/unplugin-transform-imports/blob/main/packages/demo-vite-svelte)\n\n### transformImportsOptions\n\n```ts\nconst defaultOptions = {\n  enforce = undefined, // \"pre\" | \"post\" | undefined\n  cwd = defaultCwd, // default: process.cwd()\n  modules = [], // See Module\n  includes = [\"**/*.{tsx,ts,jsx,js,mjs}\"],\n  excludes = [\"node_modules\"],\n  parseOptions, // Optional. See: https://babeljs.io/docs/en/babel-parser#options\n  transformOptions, // Optional. See: https://babeljs.io/docs/en/options\n};\n```\n\n#### Module\n\n```ts\ntransformImports.vite({\n  modules: [\n    {\n      path: \"lodash\", // the module name to replace\n    },\n\n    // You can get the same results with these transform options:\n    {\n      path: \"lodash\", // the module name to replace\n      transform: `\\${moduleName}/\\${importName}`,\n    },\n    {\n      path: \"lodash\",\n      transform: (importName, moduleName) =\u003e `${moduleName}/${importName}`,\n    },\n  ],\n});\n\n// This will make:\nimport { merge } from \"lodash\";\n\n// be transformed to:\nimport merge from \"lodash/merge\";\n```\n\nThere are three variables for the transform function and the transform template. They are `importName`, `moduleName` and `constName`. It's depends on the original code:\n\n```ts\nimport { [importName] } from \"[moduleName]\"; // constName === importName\nimport { [importName] as [constName] } from \"[moduleName]\";\n```\n\nYou can use them in a transform template:\n\n```ts\nconst module = {\n  path: \"lodash\",\n  transform: `\\${moduleName}/\\${importName}/\\${constName}`,\n};\n```\n\nor in transform function:\n\n```ts\nconst module = {\n  path: \"lodash\",\n  transform: (importName, moduleName, constName) =\u003e\n    `${moduleName}/${importName}/${constName}`,\n};\n```\n\n### `transformImports()`\n\nYou can use `transformImports()` function directly without unplugin:\n\n```ts\nimport transformImports from `unplugin-transform-imports/transformImports`;\n\nconst transformedCode:string = transformImports(\n  code,\n  {\n    modules, // See Module\n    parseOptions, // Optional. See: https://babeljs.io/docs/en/babel-parser#options\n    transformOptions, // Optional. See: https://babeljs.io/docs/en/options\n  }\n);\n```\n\n## Development\n\n```sh\n# init\npnpm i\n\n# build\npnpm build\n\n# install again to link production\npnpm i\n\n## go to the demo\ncd packages/demo-{theDemoPath}\n```\n\n## Test\n\n```sh\npnpm test\n```\n\n## LICENSE\n\n[MIT](https://github.com/VdustR/unplugin-transform-imports/blob/main/LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvdustr%2Funplugin-transform-imports","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvdustr%2Funplugin-transform-imports","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvdustr%2Funplugin-transform-imports/lists"}