{"id":13451890,"url":"https://github.com/lukeed/dimport","last_synced_at":"2025-10-09T18:24:44.678Z","repository":{"id":57217663,"uuid":"135855365","full_name":"lukeed/dimport","owner":"lukeed","description":"Run ES Module syntax (`import`, `import()`, and `export`) in any browser – even IE!","archived":false,"fork":false,"pushed_at":"2019-05-10T15:33:10.000Z","size":48,"stargazers_count":548,"open_issues_count":5,"forks_count":5,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-28T18:52:41.703Z","etag":null,"topics":[],"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/lukeed.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}},"created_at":"2018-06-02T22:03:09.000Z","updated_at":"2024-09-27T03:03:47.000Z","dependencies_parsed_at":"2022-08-28T21:41:22.162Z","dependency_job_id":null,"html_url":"https://github.com/lukeed/dimport","commit_stats":null,"previous_names":["lukeed/dynamic-import-ponyfill"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukeed%2Fdimport","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukeed%2Fdimport/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukeed%2Fdimport/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukeed%2Fdimport/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukeed","download_url":"https://codeload.github.com/lukeed/dimport/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245158760,"owners_count":20570247,"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-07-31T07:01:06.051Z","updated_at":"2025-10-09T18:24:39.645Z","avatar_url":"https://github.com/lukeed.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# dimport [![Build Status](https://badgen.now.sh/travis/lukeed/dimport)](https://travis-ci.org/lukeed/dimport)\n\n\u003e Run ES Module syntax (`import`, `import()`, and `export`) in any browser \u0026mdash; even IE!\n\nAt its core, `dimport` is a polyfill for ES Module syntax, including [dynamic imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports)!\u003cbr\u003e\nAnd with it, you can serve modern ESM-driven application files to any browser.\n\nWhile browsers _are_ increasing support for JavaScript modules natively, the current landscape is not easy to navigate.\u003cbr\u003e\nFor example, many browsers _do support_ ESM syntax (aka, `import` and `export`) within `\u003cscript type=module /\u003e` tags; however, not all of these support _dynamic import_ statements since it came later.\nIn order to leverage the benefits of ESM today, a developer must choose between:\n\n* dropping support for lagging browsers\n* complicating their development process\n* building and/or distributing multiple versions of their application\n* abstaining from shipping ESM syntax at all :cry:\n\nNow, `dimport` allows the developer to ship ESM **today** to all browsers without compromise.\u003cbr\u003e\nBetter yet, the development and distribution processes are simplified, if not unchanged.\n\nPS: Check out the [`/examples`](/examples) directory~!\n\n\u003cbr\u003e\n\n---\n\n***Important***\n\nThis module **does not** convert your ES2015+ syntax into ES5 or below!\u003cbr\u003e\nWhile `dimport` may allow older browsers to parse and interpret the ESM format, it does nothing to make the _contents_ of your file(s) backwards compatible.\n\n---\n\n\u003cbr\u003e\n\n## Modes\n\nThere are three \"versions\" of `dimport`, each of which utilize different APIs and approaches to yield full ESM compatibility.\n\nPlease note that **all modes** check for native `import()` support first and foremost.\u003cbr\u003e\nThis means that `dimport` won't do anything if it doesn't have to.\n\n#### \"module\"\n\u003e **Size (gzip):** 675 bytes\u003cbr\u003e\n\u003e **Availability:** [UMD](https://unpkg.com/dimport), [CommonJS](https://unpkg.com/dimport/dist/index.js), [ES Module](https://unpkg.com/dimport?module)\u003cbr\u003e\n\u003e **Requires:** `script[type=module]`, `fetch`, `Promise`, `URL`\n\nSince _static_ `import` statements are supported, this mode parses all _dynamic_ `import()`s and creates temporary `script[type=module]` tags pointing to the resource's full, canonical URL. Once the temporary script loads, the originating Promise is resolved, returning the contents.\n\n#### \"nomodule\"\n\u003e **Size (gzip):** 918 bytes\u003cbr\u003e\n\u003e **Availability:** [UMD](https://unpkg.com/dimport/nomodule), [ES Module](https://unpkg.com/dimport/nomodule/index.mjs)\u003cbr\u003e\n\u003e **Requires:** `fetch`, `Promise`, `URL`\n\nAll `import`, `export`, and `import()` statements are dynamically rewritten to CommonJS modules so that their contents/exports are easily returned.\n\nAny `import` statements are parsed early, ensuring full canonical URLs, and then the whole file is wrapped in a `Promise.all` chain, guaranteeing each `import` its desired module.\n\n#### \"legacy\"\n\u003e **Size (gzip):** 1143 bytes\u003cbr\u003e\n\u003e **Availability:** [UMD](https://unpkg.com/dimport/legacy), [ES Module](https://unpkg.com/dimport/legacy/index.mjs)\u003cbr\u003e\n\u003e **Requires:** `Promise`, `XMLHttpRequest`\n\nTakes the same approach as [\"nomodule\"](#nomodule), but inserts alternatives to `fetch` and `URL`.\n\n\u003e **Important:** You will need to supply your own Promise polyfill for IE support.\n\n\n## Usage\n\n\u003e Don't miss the [`/examples`](/examples) directory :sparkles:\n\nIt's possible to use `dimport` in a variety of ways!\n\nThe simplest way is to connect a few `\u003cscript/\u003e` tags to [unpkg.com](https://unpkg.com/):\n\n```html\n\u003c!-- Load the \"module\" version on browsers that can support it. --\u003e\n\u003cscript type=\"module\" src=\"https://unpkg.com/dimport?module\" data-main=\"/bundle.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Load the \"nomodule\" version on older browsers – acts as fallback! --\u003e\n\u003cscript nomodule defer src=\"https://unpkg.com/dimport/nomodule\" data-main=\"/bundle.js\"\u003e\u003c/script\u003e\n```\n\nIn the sample above, a browser will automatically choose which script `type` to parse.\u003cbr\u003e\nThis means the two scripts can live side-by-side without loading your application twice!\u003cbr\u003e\nFinally, the _same_ application file (`bundle.js`) can be used, despite the `module`-vs-`nomodule` choice.\n\nYou will also notice that the scripts have a `data-main=\"\"` attribute.\u003cbr\u003e\nThis is the path to _your application_ or _your ESM-containing file_ you wish to load.\n\nOnce `dimport` has loaded, it circles back and see that its `\u003cscript/\u003e` caller also wants it to load a file.\u003cbr\u003e\nAlternatively, `dimport` can load an inline script from its caller!\n\n```html\n\u003c!-- We can use any \"mode\" here, but choosing only 1 for simplicity --\u003e\n\u003cscript src=\"https://unpkg.com/dimport/nomodule\"\u003e\n  // Notice that we can use `import` inside a script without \"type=module\"\n  import { h, render } from 'https://unpkg.com/preact?module';\n\n  render(\n    h('h1', null, 'Hello world'),\n    document.body\n  );\n\u003c/script\u003e\n```\n\nFinally, `dimport` is available for programmatic use and/or usable _within_ your bundle (via Webpack or Rollup)\n\n```\n$ npm install --save dimport\n```\n\n```js\nimport dimport from 'dimport';\n// or, without bundling\nimport dimport from 'https://unpkg.com/dimport?module';\n\n// Pass in URLs or file paths\n// ~\u003e like `import()` usage\ndimport('./foo.js').then(...);\n```\n\n\n## API – Programmatic\n\n### dimport(url)\n\nReturns: `Promise`\n\nReturns a Promise containing the module.\n\n\u003c!-- \u003e **Note:** The Promise-requestor is cached for instant reuse. --\u003e\n\n#### url\nType: `String`\n\nThe URL of the script to import.\n\n\u003e **Note:** Will be transformed into a full URL if not already – see [`new URL()`](https://developer.mozilla.org/en-US/docs/Web/API/URL/URL#Examples)\n\n\n## Browser Support\n\nThe `dimport` columns yield support for **both** static and dynamic imports.\n\n\u003e **Important:** Chart represents ESM syntax only!\u003cbr\u003eNot indicative of ES2015+ syntax usage within your app.\n\n| Browser | `import`\u003cbr\u003enative | `import()`\u003cbr\u003enative | dimport\u003cbr\u003emodule | dimport\u003cbr\u003enomodule | dimport\u003cbr\u003elegacy |\n|---------|--------------------|----------------------|-------------------|---------------------|-------------------|\n| Chrome  | 61                 | 63                   | 61                | 42                  | :+1:\u003csup\u003e*\u003c/sup\u003e  |\n| Safari  | 10.1               | 11.1                 | 10.1              | 10.1                | :+1:\u003csup\u003e*\u003c/sup\u003e  |\n| Firefox | 60                 | 67                   | 60                | 39                  | :+1:\u003csup\u003e*\u003c/sup\u003e  |\n| Edge    | 16                 | :x:                  | 16                | 14                  | :+1:\u003csup\u003e*\u003c/sup\u003e  |\n| IE      | :x:                | :x:                  | :x:               | :x:                 | 7 \u003csup\u003e*\u003c/sup\u003e     |\n\n\u003csup\u003e*\u003c/sup\u003e _Indicates support with `Promise` polyfill supplied_\n\n\n## Prior Art\n\n* [`dynamic-import-ponyfill`](https://www.npmjs.com/package/dynamic-import-ponyfill) – The \"first version\" of `dimport` – now deprecated.\n* [`shimport`](https://github.com/Rich-Harris/shimport) – Patient zero. Similar to \"nomodule\" mode. Made it \"okay\" to rewrite files on the fly.\n\n## License\n\nMIT © [Luke Edwards](https://lukeed.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukeed%2Fdimport","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukeed%2Fdimport","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukeed%2Fdimport/lists"}