{"id":18941640,"url":"https://github.com/bahrus/nomodule","last_synced_at":"2026-04-29T10:09:20.189Z","repository":{"id":41610416,"uuid":"277170519","full_name":"bahrus/nomodule","owner":"bahrus","description":"Make ES6 module scripts more convenient.","archived":false,"fork":false,"pushed_at":"2023-03-05T04:05:57.000Z","size":665,"stargazers_count":2,"open_issues_count":2,"forks_count":0,"subscribers_count":3,"default_branch":"baseline","last_synced_at":"2025-02-01T14:04:17.395Z","etag":null,"topics":["currentscript","custom-element","custom-elements","custom-elements-ts","custom-elements-v1","ish","web-component","web-components","webcomponent","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/bahrus.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-04T19:09:40.000Z","updated_at":"2023-05-07T07:01:42.000Z","dependencies_parsed_at":"2024-11-08T12:30:44.455Z","dependency_job_id":"f9e089ec-f102-43a2-8bbe-6d8f49620eae","html_url":"https://github.com/bahrus/nomodule","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahrus%2Fnomodule","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahrus%2Fnomodule/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahrus%2Fnomodule/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahrus%2Fnomodule/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bahrus","download_url":"https://codeload.github.com/bahrus/nomodule/tar.gz/refs/heads/baseline","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239942756,"owners_count":19722330,"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":["currentscript","custom-element","custom-elements","custom-elements-ts","custom-elements-v1","ish","web-component","web-components","webcomponent","webcomponents"],"created_at":"2024-11-08T12:28:49.847Z","updated_at":"2026-04-29T10:09:15.161Z","avatar_url":"https://github.com/bahrus.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# no-module\n\n\u003ca href=\"https://nodei.co/npm/nomodule/\"\u003e\u003cimg src=\"https://nodei.co/npm/nomodule.png\"\u003e\u003c/a\u003e\n\n\u003cimg src=\"https://badgen.net/bundlephobia/minzip/nomodule\"\u003e\n\n## Purpose\n\nES6 modules are a great leap forward over the legacy JavaScript browsers support.  But there are two gaps where legacy JavaScript provided some advantages.\n\n### Referencing outside the script tag.\n\nJS references, pre-ES6 modules, allowed for global variables / functions, which in turn saw such libraries as JQuery thrive. jQuery consumers could just assume $ was ever present and ready to serve the developer.\n\nOver time, this aspect of JavaScript came to be viewed more as a bug than a feature, leading to such initiatives as require.js and eventually ES6 modules.\n\nOn the other hand, ES6 modules provide export capabilities, but the keyword \"export\" symbol becomes meaningless in the context of a script tag:\n\n```html\n\u003cscript type=module\u003e\nexport const h = 'hello'; // nothing outside this module can access h, and the export keyword is meaningless.\n\u003c/script\u003e\n```\n\n### Access to the script tag instance.\n\nAnother important feature ES6 modules lost that \"legacy\" script tags supported was access to the script tag from which the script derived - document.currentScript.\n\nno-module provides some support to overcome these limitations.\n\n## Syntax\n\nnomodule.js provides a mechanism where the exported symbols can be accessed.  Script tags must have attribute nomodule=ish:\n\n```html\n\u003cscript nomodule=ish id=myScriptTag\u003e\nexport const h = 'hello';\nthrow 'new Error'; \n\u003c/script\u003e\n\n\u003cscript\u003e\n    myScriptTag.addEventListener('loaded', e =\u003e{\n        console.log(myScriptTag._modExport);\n        // { h: \"hello\" }\n    });\n    myScriptTag.addEventListener('err', e =\u003e {\n        console.log(e.detail.message);\n        // \"new Error\"\n    })\n\u003c/script\u003e\n```\n\n**NBs:**\n\n1.  The \"nomodule\" attribute tells modern browsers to ignore the tag, so there is no wasted CPU processing something that isn't fully complete.\n\n2.  This library, no-module.js, then, can inject some special instructions to produce the desired effects.  But the JS processor which is used after the special instructions are inserted is in fact the ES6 (module) processor.  So ES6 imports are allowed, for example (though support for import maps will require turning on the Chrome flag for import maps, or using a polyfill, like es-module-shim or es-dev-server).\n\n3.  The pattern matching is precise / inflexible, and is limited to \"export[space]const[space][symbol to export]\".\n\nno-module.js also works for script references to ES6 modules, i.e.:\n\n```html\n\u003cscript nomodule=ish src=myModule.js\u003e\u003c/script\u003e\n```\n\n## document.currentScript replacement\n\nTo access the script tag which references or contains the script, use the magic string: \"selfish\":\n\n```JavaScript\nconst scriptTag = selfish;\nconsole.log(scriptTag);\n//\u003cscript nomodule=\"ish\" src=\"test.js\" id=\"myScriptTag\" data-found=\"true\" data-loaded=\"true\"\u003e\u003c/script\u003e\n```\n\n**NB:** Greedy code will break.\n\nSimply including a reference to no-module.js will allow any \"nomodule=ish\" script tags outside any shadow DOM to load as described above.\n\nTo achieve the same behavior within a shadow DOM realm, include a single no-module tag somewhere:\n\n```html\n\u003cmy-custom-element\u003e\n    #shadow\n        ...\n        \u003cscript nomodule=ish src=myModule.js\u003e\u003c/script\u003e\n        ...\n        \u003cscript nomodule=ish src=yourModule.js\u003e\u003c/script\u003e\n        \u003cno-module\u003e\u003c/no-module\u003e\n\u003c/my-custom-element\u003e\n```\n\n** Working like it's '95 [TODO]\n\n```html\n\u003cdiv on-click=\"myScript.yawnAndStretch()\"\u003eTumble out of bed\u003c/div\u003e\n...\n\u003cscript nomodule=ish id=myScript\u003e\nexport function yawnAndStretch(){\n    event.target.textContent = 'Try to come to life';\n}\n\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahrus%2Fnomodule","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbahrus%2Fnomodule","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahrus%2Fnomodule/lists"}