{"id":20367123,"url":"https://github.com/jerrythomas/svelte-esm-loader","last_synced_at":"2026-05-15T21:37:35.065Z","repository":{"id":57121017,"uuid":"409111083","full_name":"jerrythomas/svelte-esm-loader","owner":"jerrythomas","description":"ESM loader for testing svelte or svelte/kit projects","archived":false,"fork":false,"pushed_at":"2021-11-02T11:18:12.000Z","size":563,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-04T19:39:24.529Z","etag":null,"topics":["esm","loader","svelte","sveltekit","testing","uvu"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/jerrythomas.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-22T07:47:15.000Z","updated_at":"2022-10-27T20:09:52.000Z","dependencies_parsed_at":"2022-08-24T00:10:52.397Z","dependency_job_id":null,"html_url":"https://github.com/jerrythomas/svelte-esm-loader","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/jerrythomas/svelte-esm-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerrythomas%2Fsvelte-esm-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerrythomas%2Fsvelte-esm-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerrythomas%2Fsvelte-esm-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerrythomas%2Fsvelte-esm-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jerrythomas","download_url":"https://codeload.github.com/jerrythomas/svelte-esm-loader/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerrythomas%2Fsvelte-esm-loader/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266241000,"owners_count":23898063,"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":["esm","loader","svelte","sveltekit","testing","uvu"],"created_at":"2024-11-15T00:29:12.904Z","updated_at":"2026-05-15T21:37:30.033Z","avatar_url":"https://github.com/jerrythomas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-esm-loader\n\n**Experimental!**\n\nNode.js esmodules [loader](https://nodejs.org/api/esm.html#esm_loaders) for [Svelte](https://github.com/sveltejs/svelte), and [SvelteKit](https://github.com/sveltejs/kit).\n\nThis is primarily intended to be used along with [uvu](https://github.com/lukeed/uvu) for testing svelte components using esm imports.\n\n## Usage\n\n```shell\nnpm install --save-dev @jerrythomas/svelte-esm-loader@beta\n```\n\nAdd the test script to your `package.json`\n\n```json\n\"script\": {\n    \"test\": \"NODE_OPTIONS='--experimental-loader @jerrythomas/svelte-esm-loader' uvu test\"\n}\n```\n\n## About\n\n- Set `{ type: 'module' }` in your `package.json`.\n- Are using ESmodule `import` statements in your `.js` test files.\n- Don't mind experimental non-production code.\n\nWith this, you can:\n\n- [x] Successfully import `.svelte` components\n  - JS code will be compiled using `svelte/compile`.\n  - If a custom config file exists, component will be pre-processed with\n    `svelte/preprocess` and [svelte-preprocess][preprocess].\n- [x] No-op import `.css` files without failure (helpful for testing).\n  - Other asset file extensions from the preprocessor config (e.g. `.postcss`)\n    will also be no-op imported without failure.\n- [x] Successfully import from aliased paths ($lib, $app) in SvelteKit.\n  - `import { goto } from $app/navigation`, will load successfully as a no-op.\n  - `import Count from $lib/Count.svelte` will import from `src/lib/Count.svelte`\n  - imports from custom aliases configured in svelte.config.js will work\n- [x] Support directory import and import from files without extensions\n  - `import { something } from $lib/core` will import from `src/lib/core/index.js` or `src/lib/core.js`\n- [x] Utilities for rendering a component and firing events for testing\n\n### Simple\n\nHere we have a simple Svelte component:\n\n```html\n\u003cscript\u003e\n  // Component.svelte -- A simple example Svelte component to test.\n  import './styles/layout.css'\n\n  const star = 'Sun'\n\u003c/script\u003e\n\n\u003cdiv\u003e\n  \u003cstrong\u003e{star}\u003c/strong\u003e\n\u003c/div\u003e\n\n\u003cstyle\u003e\n  strong {\n    color: orange;\n  }\n\u003c/style\u003e\n```\n\nNode.js will ordinarily fail on the following `import`, as it doesn't know how to handle `.svelte` (and the included `.css`) files:\n\n```js\n// Component.test.js -- Test a Svelte component.\nimport Component from './Component.svelte'\n```\n\nThe same code will work successfully if we start Node.js with our loader:\n\n```shell\nNODE_OPTIONS=\"--experimental-loader @jerrythomas/svelte-esm-loader\" npm run test\n```\n\n### Complex\n\nHere we have a more complex Svelte component, which requires preprocessing for it's advanced features:\n\n```html\n\u003cscript\u003e\n  // Component.svelte -- A complex example Svelte component to test.\n\n  // ADD: .postcss import\n  import './styles/page.postcss'\n\n  const star = 'Sun'\n\u003c/script\u003e\n\n\u003c!-- ADD: \u003ctemplate\u003e tag from svelte-preprocess --\u003e\n\u003ctemplate\u003e\n  \u003cdiv class=\"planet\"\u003e\n    \u003cstrong\u003e{star}\u003c/strong\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003c!-- ADD: postcss w/nesting --\u003e\n\u003cstyle lang=\"postcss\"\u003e\n  .planet {\n    strong {\n      color: orange;\n    }\n  }\n\u003c/style\u003e\n```\n\nWe'll create a new custom config file to hold our [svelte-preprocess][preprocess] settings:\n\n```js\n// svelte-preprocess.config.js -- A custom home for our preprocess settings.\nexport default {\n  postcss: true,\n}\n```\n\nAnd now we can have our advanced Svelte component compile correctly:\n\nIf you happen to use [SvelteKit][sveltekit], and don't want to repeat the processor settings, you can change your `svelte.config.js` to pull in the config from our custom file:\n\n```js\n// svelte.config.js -- SvelteKit config file.\nimport sveltePreprocess from 'svelte-preprocess'\n\nconst { default: sveltePreprocessConfig } = await import(\n  resolve('./svelte-preprocess.config.js')\n)\n\nexport default {\n  // ...,\n  preprocess: [\n    // ...,\n    sveltePreprocess(sveltePreprocessConfig),\n  ],\n}\n```\n\n## Notes\n\n- Importing `.json` files can be accomplished with experimental node flag `--experimental-json-modules`.\n- Leaving off the `.js` extension works.\n- You can import module folders, assuming that `index.js` exists in the folder.\n- Import aliases (`from '$utils/draw.js'`) works. This relies on `svelte.config.js`.\n\n## References\n\n- [brev/esm-loader-svelte](https://github.com/brev/esm-loader-svelte): the original implemention and starter for this package\n- [alias](https://www.npmjs.com/package/create-esm-loader#2-create-directory-aliases)\n- [chain](https://www.npmjs.com/package/esm-loader-chaining-polyfill)\n- [jsdom](https://github.com/modosc/global-jsdom)\n- [loaders](https://nodejs.org/api/esm.html#esm_loaders)\n- [node](https://github.com/nodejs/node)\n- [preprocess](https://github.com/sveltejs/svelte-preprocess)\n- [svelte](https://github.com/sveltejs/svelte)\n- [sveltekit](https://github.com/sveltejs/kit)\n- [typemodule](https://nodejs.org/api/packages.html#packages_package_json_and_file_extensions)\n- [uvu](https://github.com/lukeed/uvu)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjerrythomas%2Fsvelte-esm-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjerrythomas%2Fsvelte-esm-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjerrythomas%2Fsvelte-esm-loader/lists"}