{"id":13447709,"url":"https://github.com/Rich-Harris/shimport","last_synced_at":"2025-03-22T01:31:13.338Z","repository":{"id":46693826,"uuid":"146150693","full_name":"Rich-Harris/shimport","owner":"Rich-Harris","description":"Use JavaScript modules in all browsers, including dynamic imports","archived":false,"fork":false,"pushed_at":"2024-06-26T08:57:15.000Z","size":748,"stargazers_count":1238,"open_issues_count":14,"forks_count":35,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-03-19T23:58:07.822Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://shimport-demos.surge.sh","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/Rich-Harris.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2018-08-26T04:17:02.000Z","updated_at":"2025-03-17T06:34:32.000Z","dependencies_parsed_at":"2024-09-30T19:40:44.874Z","dependency_job_id":"2df089a4-2a88-434f-ac5d-da09d0b5508d","html_url":"https://github.com/Rich-Harris/shimport","commit_stats":{"total_commits":94,"total_committers":6,"mean_commits":"15.666666666666666","dds":0.07446808510638303,"last_synced_commit":"2b7ec41a56db0e9c1f74a4ce6ab59af91536bef1"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rich-Harris%2Fshimport","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rich-Harris%2Fshimport/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rich-Harris%2Fshimport/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rich-Harris%2Fshimport/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Rich-Harris","download_url":"https://codeload.github.com/Rich-Harris/shimport/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244893430,"owners_count":20527588,"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-31T05:01:24.938Z","updated_at":"2025-03-22T01:31:12.903Z","avatar_url":"https://github.com/Rich-Harris.png","language":"JavaScript","readme":"# Shimport\n\nA 2kb shim for `import` and `export`. Allows you to use JavaScript modules in **all** browsers, including dynamic `import()`.\n\n\n## Quick start\n\nSuppose you have a module called `js/app.js`. We want to:\n\n1. check to see if modules are fully supported in the current browser, including dynamic imports\n2. if they are, just use the native module loader\n3. if not, use Shimport\n\nWe can do this by adding a simple script tag to our `index.html` file:\n\n```html\n\u003cscript\u003e\n  function shimport(src) {\n    try {\n      new Function('import(\"' + src + '\")')();\n    } catch (e) {\n      var s = document.createElement('script');\n      s.src = 'https://unpkg.com/shimport';\n      s.dataset.main = src;\n      document.head.appendChild(s);\n    }\n  }\n\n  // Load 'js/app.js' via built-in import(), falling back to shimport if needed:\n  shimport('./js/app.js');\n\u003c/script\u003e\n```\n\n\n## Installing locally\n\nIn the example above we loaded Shimport from the unpkg CDN. You can also [grab the latest copy](https://unpkg.com/shimport) and include alongside your app's other files.\n\nYou can also `npm install shimport`, in which case it will be available as `node_modules/shimport/index.js`.\n\n\n## API\n\nMost of the time you won't need to interact directly with Shimport, but it's useful to understand how it works. The script creates a global variable, `__shimport__`, with the following methods:\n\n* `load(url: string) =\u003e Promise\u003cmodule\u003e` — `url` must be fully qualified\n* `transform(source: string) =\u003e string` — converts a JavaScript module to a Shimport module\n* `define(id: string, deps: string[], factory: (...) =\u003e void)` — used internally to construct modules\n\n\n## Using with Rollup and code-splitting\n\nSince [Rollup](https://rollupjs.org) can already output JavaScript modules, it's easy to use with Shimport. Just use the `esm` output format:\n\n```js\n// rollup.config.js\nexport default {\n  input: 'src/app.js',\n  output: {\n    dir: 'js',\n    format: 'esm'\n  },\n  experimentalCodeSplitting: true\n};\n```\n\n\n## Skipping feature detection\n\nIf you want to *always* use Shimport, regardless of environment, you can create a script that loads Shimport with a `data-main` attribute:\n\n```html\n\u003cscript src=\"path/to/shimport.js\" data-main=\"path/to/my/module.js\"\u003e\u003c/script\u003e\n```\n\n\n## Using with a web worker\n\nIn a web worker environment, Shimport can't auto-start based on a script with `data-main`. Instead, use the API:\n\n```js\nimportScripts('path/to/shimport.js');\n\nconst { href } = new URL('path/to/my/module.js', location.href);\n__shimport__.load(href).then(mod =\u003e {\n\t// module is loaded\n});\n```\n\n\n## Is it fast?\n\nBlazingly. The code transformation is fast enough that you probably don't need to worry about it, unless you're shipping far too much JavaScript in the first place.\n\nA future version of Shimport may use web workers to do the transformation off the main thread.\n\n\n## Browser support\n\nShimport *only* transpiles the `import` and `export` statements in your code. If you want to use other features in browsers that do not support them, they will need to be transpiled separately.\n\nShimport also expects to be able to use `Array.from`, `fetch`, `Map` and `URL`. On browsers like Internet Explorer, you will need to bring your own polyfills.\n\n\n## Caveats\n\nThe JavaScript module specification is complex, and extremely hard to implement completely with the techniques Shimport uses. It is designed to meet the 98% of cases you encounter in the real world, rather than covering the entire spec at the cost of becoming prohibitively slow and complex.\n\nSpecifically, it will not correctly handle cyclical dependencies or live bindings.\n\nBecause Shimport uses `fetch`, and evaluates the transformed result, it will not work with some CSP and CORS configurations.\n\n\n\n## License\n\n[MIT](LICENSE)\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRich-Harris%2Fshimport","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FRich-Harris%2Fshimport","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRich-Harris%2Fshimport/lists"}