{"id":16668027,"url":"https://github.com/zachsa/esm-x","last_synced_at":"2026-03-01T04:36:01.896Z","repository":{"id":169141705,"uuid":"645024296","full_name":"zachsa/esm-x","owner":"zachsa","description":"Enhance browser-JavaScript support to include JSX/Typescript syntax for websites utilizing importmaps. ","archived":false,"fork":false,"pushed_at":"2025-11-12T09:06:27.000Z","size":5178,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-12T10:21:54.360Z","etag":null,"topics":["importmaps"],"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/zachsa.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":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-05-24T18:53:14.000Z","updated_at":"2025-11-12T09:06:31.000Z","dependencies_parsed_at":"2023-10-10T16:27:31.098Z","dependency_job_id":"fc068a73-1a49-4fe7-ac4b-32bb10599d72","html_url":"https://github.com/zachsa/esm-x","commit_stats":null,"previous_names":["zachsa/es-module-shims-jsx-plugin","zachsa/es-module-shims-x"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/zachsa/esm-x","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachsa%2Fesm-x","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachsa%2Fesm-x/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachsa%2Fesm-x/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachsa%2Fesm-x/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zachsa","download_url":"https://codeload.github.com/zachsa/esm-x/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachsa%2Fesm-x/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29960253,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T01:47:18.291Z","status":"online","status_checked_at":"2026-03-01T02:00:07.437Z","response_time":124,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["importmaps"],"created_at":"2024-10-12T11:16:02.638Z","updated_at":"2026-03-01T04:36:01.861Z","avatar_url":"https://github.com/zachsa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# esm-x\n\nEnhance browser-JavaScript support to include JSX/Typescript syntax for websites utilizing importmaps.\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n- [Motivation](#motivation)\n  - [How it works](#how-it-works)\n- [Usage](#usage)\n  - [Options](#options)\n  - [Importmaps](#importmaps)\n    - [External importmaps](#external-importmaps)\n- [Local development](#local-development)\n  - [Publish](#publish)\n- [Install](#install)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n# Motivation\n\nWith all major browsers now supporting `importmaps`, bundle-free web development workflows have become both feasible and incredibly convenient. This project seeks to bring that convenience to React/Typescript projects.\n\n## How it works\n\nLeverages [importmaps](https://github.com/WICG/import-maps) in conjunction with [the ES Module Shim library](https://github.com/guybedford/es-module-shims). With `shimMode` forced to `true`, all Source Code from the website origin is transpiled using [Babel](https://babeljs.io/), while prior-optimized imports originating from a module CDN (such as the excellent JSPM CDN) are loaded directly.\n\n# Usage\n\nInclude the `esm-x` library (328kB gzipped) as the first script in your HTML file, and include at least one `\u003cscript type=\"esm-x\"\u003e...\u003c/script\u003e`. Scripts of `type=\"esm-x\"` will be transpiled and executed in the order they are included in the HTML page.\n\nHere is an example of a simple React application with the `react` and `react-dom` library imports defined via an importmap. Copy this file into `index.html`, and serve via a web server (i.e. `npx http-server -c-1`). There is an example of an `@mui/material` app in [the dev directory of this repository](/dev/).\n\n`esm-x` works without an importmap, but ES Module Shims is required.\n\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n    \u003ctitle\u003eESM-X Example\u003c/title\u003e\n\n    \u003c!-- Include ESM-X here --\u003e\n    \u003cscript\n      id=\"esm-x\"\n      compiler=\"babel\"\n      loading=\"circular\"\n      src=\"https://www.unpkg.com/@zachsa/esm-x@1.1.2/dist/index.js\"\n    \u003e\u003c/script\u003e\n\n    \u003c!--\n      Import map generated with JSPM Generator\n      Edit here: https://generator.jspm.io/#Y2NhYGBiDs0rySzJSU1hKEpNTC7RTcnPdTC01DPSM9BPzslMzSuBiEPFAMQOjWszAA\n    --\u003e\n    \u003cscript type=\"importmap\"\u003e\n      {\n        \"imports\": {\n          \"react\": \"https://ga.jspm.io/npm:react@19.2.0/index.js\",\n          \"react-dom/client\": \"https://ga.jspm.io/npm:react-dom@19.2.0/client.js\"\n        },\n        \"scopes\": {\n          \"https://ga.jspm.io/\": {\n            \"react-dom\": \"https://ga.jspm.io/npm:react-dom@19.2.0/index.js\",\n            \"scheduler\": \"https://ga.jspm.io/npm:scheduler@0.27.0/index.js\"\n          }\n        }\n      }\n    \u003c/script\u003e\n\n    \u003c!-- ES Module Shims --\u003e\n    \u003cscript\n      async\n      src=\"https://ga.jspm.io/npm:es-module-shims@2.6.2/dist/es-module-shims.js\"\n      crossorigin=\"anonymous\"\n    \u003e\u003c/script\u003e\n\n    \u003c!-- ESM-X script --\u003e\n    \u003cscript type=\"esm-x\"\u003e\n      import React, { FC } from 'react';\n      import { createRoot } from 'react-dom/client';\n      const root = createRoot(document.getElementById('root') as HTMLElement);\n\n      const App: FC = () =\u003e \u003cdiv\u003eHello from ESM-X\u003c/div\u003e;\n      root.render(\u003cApp /\u003e);\n    \u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Options\n\nConfigure the ESM-X script by including HTML tag id and other attributes:\n\n```html\n\u003cscript id=\"esm-x\" loading=\"circular|linear|disabled\" compiler=\"babel|esbuild\" src=\"...\"\u003e\u003c/script\u003e\n```\n\n## Importmaps\n\nHead to the [JSPM generator](https://generator.jspm.io/) to quickly generate an importmap. Any importmap configuration should be supported - huge importmaps are fine, make sure to take advantage of dynamic imports / code splitting (for example, `Suspense/lazy` when using React), etc. (and obviously don't preload scripts)\n\n### External importmaps\n\nTo use an external importmap, make sure that your importmap tag is of type \"importmap-shim\", and that the src url `endsWith('importmap') || endsWith('importmap.json')`. For example:\n\n```html\n\u003cscript type=\"importmap-shim\" src=\"path/to/file/called/importmap.json\"\u003e\u003c/script\u003e\n```\n\nIt's easy to work with external importmaps using the [`jspm CLI`](https://jspm.org/docs/jspm-cli/stable/).\n\n# Local development\n\nStart a local web server and navigate to [localhost:3000/dev](http://localhost:3000/dev):\n\n```sh\nnpx http-server --port 3000 -c-1\nchomp --watch\n```\n\nTest the following cases:\n- [index.html (default)](/dev/index.html)\n- [no-importmap.html](/dev/no-importmap.html)\n- [tsx.html](/dev/tsx.html)\n- [empty-importmap.html](/dev/empty-importmap.html)\n- [docs.html (copy this to README.md)](/dev/docs.html)\n\n## Publish\n\n```sh\nnpm publish --access public\n```\n\n# Install\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzachsa%2Fesm-x","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzachsa%2Fesm-x","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzachsa%2Fesm-x/lists"}