{"id":19450943,"url":"https://github.com/rixo/svelte-preprocess-autoimport","last_synced_at":"2025-04-25T04:30:20.646Z","repository":{"id":57152916,"uuid":"297890117","full_name":"rixo/svelte-preprocess-autoimport","owner":"rixo","description":null,"archived":false,"fork":false,"pushed_at":"2020-11-08T14:48:46.000Z","size":1517,"stargazers_count":21,"open_issues_count":3,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-20T20:18:40.031Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rixo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-23T07:33:42.000Z","updated_at":"2021-06-27T15:22:21.000Z","dependencies_parsed_at":"2022-09-06T20:51:34.999Z","dependency_job_id":null,"html_url":"https://github.com/rixo/svelte-preprocess-autoimport","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rixo%2Fsvelte-preprocess-autoimport","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rixo%2Fsvelte-preprocess-autoimport/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rixo%2Fsvelte-preprocess-autoimport/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rixo%2Fsvelte-preprocess-autoimport/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rixo","download_url":"https://codeload.github.com/rixo/svelte-preprocess-autoimport/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250754495,"owners_count":21481822,"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":[],"created_at":"2024-11-10T16:39:39.888Z","updated_at":"2025-04-25T04:30:19.991Z","avatar_url":"https://github.com/rixo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-preprocess-autoimport\n\n\u003e A preprocessor for automatic imports \u0026 createEventDispatcher.\n\nAutomatically adds import lines for `onMount`, etc.\n\nAlso automatically writes `const dispatch = createEventDispatcher()` for you.\n\nThe preprocessor puts the import statements in the blank spaces of your source files, so sourcemaps are unaffected.\n\n![autoimport in action](./demo.gif)\n\n## Example\n\nWrite:\n\n```svelte\n\u003cscript\u003e\n  onMount(() =\u003e {\n    // ...\n  })\n\u003c/script\u003e\n\n\u003cbutton on:click={() =\u003e dispatch('event')} /\u003e\n\n\u003cdiv transition:fade /\u003e\n```\n\nGet:\n\n```svelte\n\u003cscript\u003e\n  import { onMount, createEventDispatcher } from 'svelte';\n  import { fade } from 'svelte/transition';\n\n  const dispatch = createEventDispatcher();\n\n  onMount(() =\u003e {\n    // ...\n  })\n\u003c/script\u003e\n\n\u003cbutton on:click={() =\u003e dispatch('event')} /\u003e\n\n\u003cdiv transition:fade /\u003e\n```\n\nThe transformed code that is actually produced is formatted like this to avoid breaking sourcemaps:\n\n```svelte\n\u003cscript\u003eimport { onMount, createEventDispatcher } from 'svelte'; const dispatch = createEventDispatcher(); import { fade } from 'svelte/transition';\n  onMount(() =\u003e {\n    // ...\n  })\n\u003c/script\u003e\n\n\u003cbutton on:click={() =\u003e dispatch('event')} /\u003e\n```\n\n## User beware: Magic globals considered harmful\n\nWhile less typing is obviously convenient, as it is often the case in programming, one needs to also consider the trade off we're making. Adding magic to a codebase often backfires more or less ~~spectacularly~~ annoyingly, experience teaches us.\n\nHere's one seasoned developer comments about this project:\n\n\u003e I hate magic globals. It makes onboarding a nightmare.\n\u003e They’re bad enough in tests where they are broadly known. Framework specific ones are even worse. It also adds a bunch of limitations in how you name stuff. This one of the reasons svelte opts for explicit over implicit. It aids comprehension. Optimising for writability over readability and comprehension is a mistake imo.\n\u003e\n\u003e -- @pngwn, Discord 2020-09-23\n\nThis is actually an opinion that I embrace wholeheartedly, which probably seems a bit conflicted given I've made a tool to do exactly what is decried here...\n\nTo be clear, I'm not sure using this is a good idea in the long run. Really not sure, that is I'm not sure it's a bad idea either.\n\nI've got a feeling we may be on a special case here. Imports from the root `svelte` package (`onMount`, `onDestroy`, `createEventDispatcher`...) are deeply ingrained in the framework. You can't use Svelte and not have them. They almost feel more like keywords of the Svelte DSL than normal imports.\n\nIn my views, Svelte is all about striking the right balance between dogmatism and pragmatism, in a quest for efficiency and simplicity. I feel that these \"magic imports\", if they are limited to the framework's own exports, might (or might not) get us closer to this balance. Maybe this balance is not the same for everyone and every projects...\n\nAnd, for sure, micromanaging imports of `onMount` and such, that are ubiquitous in a codebase and can come and go during a component's development cycle can become a bit tedious. That's why I'm inclined, in this one case, to experiment with allowing a bit of magic to percolate into my codebase. To see if the gain is as much as I hoped. To see if I face some major drawbacks. In a nutshell, to experiment.\n\nI think that's how you should take it too, if you decide to use this at this point. And, also, don't overlook pondering the above considerations.\n\nThat being said, let's go to play!\n\n## Install\n\n```bash\nyarn add -D svelte-preprocess-autoimport\n```\n\n## Usage\n\nIn your Svelte config (example is for Rollup, but preprocessors are portable so it should work anywhere Svelte):\n\n```js\nimport autoimport from 'svelte-preprocess-autoimport'\nimport svelte from 'rollup-plugin-svelte-hot'\n\n...\n\nexport default {\n  ...\n  plugins: [\n    svelte({\n      ...\n      preprocess: [\n        autoimport()\n      ]\n    })\n  ]\n}\n```\n\n## Config\n\n```js\nautoimport({\n  aliases: {\n    // short form\n    //\n    // produces: import { onMount } from 'svelte'\n    onMount: 'svelte',\n    // produces: import { onDestroy } from 'svelte'\n    onDestroy: 'svelte',\n\n    // long form\n    //\n    // produces: import { onMount as useEffect } from 'svelte'\n    useEffect: {\n      import: 'onMount',\n      from: 'svelte',\n    },\n  },\n\n  // if the value (e.g. `$$dispatch`) is found in the code, then\n  // createEventDispatcher will be imported an a dispatch variable with this\n  // name will be created.\n  //\n  // NOTE: leading $ prefixes will be transformed to _ in the processed code\n  //\n  createEventDispatcher: '$$dispatch', // default: 'dispatch'\n})\n```\n\nThe [default config](https://github.com/rixo/svelte-preprocess-autoimport/blob/master/src/index.js#L3) is to automatize all imports from `svelte` and `svelte/*`.\n\nYou can pass a function to customize the default config:\n\n```js\n// e.g. a more conservative config that only aliases imports from `svelte` and\n// createEventDispatcher automation\nautoimport(defaults =\u003e ({\n  ...defaults,\n  aliases: {\n    ...Object.fromEntries(\n      Object.entries(defaults.aliases).filter(\n        ([imp, from]) =\u003e from === 'svelte'\n      )\n    ),\n  },\n}))\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frixo%2Fsvelte-preprocess-autoimport","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frixo%2Fsvelte-preprocess-autoimport","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frixo%2Fsvelte-preprocess-autoimport/lists"}