{"id":15659862,"url":"https://github.com/gervinfung/ts-add-js-extension","last_synced_at":"2025-05-01T10:17:00.133Z","repository":{"id":40413076,"uuid":"432780857","full_name":"GervinFung/ts-add-js-extension","owner":"GervinFung","description":"Add .js extension to each relative import/export statement in JavaScript file through AST","archived":false,"fork":false,"pushed_at":"2025-03-28T13:42:42.000Z","size":708,"stargazers_count":37,"open_issues_count":1,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-01T10:12:56.251Z","etag":null,"topics":["esm","esmodules","export","import","javascript","npm-package","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ts-add-js-extension","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/GervinFung.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":"2021-11-28T17:36:27.000Z","updated_at":"2025-03-31T17:14:27.000Z","dependencies_parsed_at":"2022-08-09T19:40:39.982Z","dependency_job_id":"a6b36c09-2ab5-4b9a-82a0-0539fa8d2c3e","html_url":"https://github.com/GervinFung/ts-add-js-extension","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/GervinFung%2Fts-add-js-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GervinFung%2Fts-add-js-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GervinFung%2Fts-add-js-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GervinFung%2Fts-add-js-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GervinFung","download_url":"https://codeload.github.com/GervinFung/ts-add-js-extension/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251857032,"owners_count":21655122,"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","esmodules","export","import","javascript","npm-package","typescript"],"created_at":"2024-10-03T13:19:26.884Z","updated_at":"2025-05-01T10:17:00.076Z","avatar_url":"https://github.com/GervinFung.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ts-add-js-extension\n\nOriginally, I created this solution for personal use due to my preference of not including the `.js` extension in TypeScript import/export statements when compiling my TypeScript project to ES Module.\nThis decision was motivated by the belief that it is unnecessary to import/export a JavaScript file that does not exist in the source code folder.\nImporting or exporting a file that does not exist would be illogical.\nIn essence, a source code should not reference its own build artifacts or output file\n\nAdditionally, another option would be to compile the TypeScript project to CommonJS Module.\nHowever, I prefer not to take that approach.\nInstead, this package is designed to cater to TypeScript or JavaScript projects that use ES Module (ESM) format and do not rely on a bundler like `esbuild` or `swc`.\n\n# Feature\n\nInitially designed for TypeScript projects exclusively, this solution also caters to those who prefer a more convenient approach when working with JavaScript.\nBy automatically appending the `.js` extension to each relative import and export statement in ES Module JavaScript, you can save yourself the effort of doing it manually.\nThis feature is particularly beneficial for TypeScript projects that target ES Module.\n\nAls, this decision was motivated by the belief that it is unnecessary to import/export a JavaScript file that does not exist in the source code folder.\nImporting or exporting a file that does not exist would be illogical.\nIn essence, a source code should not reference its own build artifacts or output file\n\nIt is worth noting that this package intelligently handles import/export statements and adds `/index.js` where necessary,\nallowing you to omit the explicit inclusion of index in the statement.\n\nAdditionally, it can determine whether a file with the `mjs` or `js` extension is being imported or exported\n\n# Usage\n\nThe compiled folder for TypeScript or JavaScript can be named according to your preference. In this case, I will use the name \"dist\" as an example.\n\n**Note**: For command line arguments, refer [here](#arguments)\n\n### Declarations\n\n#### Command line:\n\n```json\n{\n\t\"scripts\": {\n\t\t\"\u003ccommand name can be anything\u003e\": \"ts-add-js-extension --dir=dist\"\n\t}\n}\n```\n\n#### API:\n\n```js\ntsAddJsExtension({\n\tdir: 'dist',\n});\n```\n\n**Note**: _If you need to include multiple root folders, such as \"common\", \"dist\", \"build\", or any other names you prefer, you can specify them accordingly, like the following_\n\n#### Command line:\n\n```json\n{\n\t\"scripts\": {\n\t\t\"\u003ccommand name can be anything\u003e\": \"ts-add-js-extension --dir=dist --include=common build --showchanges=true\"\n\t}\n}\n```\n\n#### API:\n\n```js\ntsAddJsExtension({\n\tdir: 'dist',\n\tshowProgress: true,\n\tinclude: ['common', 'build'],\n});\n```\n\n### Execution Process\n\nAssuming you have a file called `main.ts` in the \"dist\" directory, the file structure would look like this:\n\n```\ndist/\n  └─ main.ts\n```\n\nAnd `main.ts` contains the following imports and exports, where all the files are TypeScript files:\n\n```ts\nimport { add } from './math';\nexport { add, sub, mul, div } from './math/index';\n\nimport div from './math/div';\nexport * as div from './math/div';\n\nimport word from './word';\n\nconsole.log(add(2, 1));\n```\n\nWhen `ts-add-js-extension` is executed, it will generate the following code for `main.js`:\n\n```ts\nimport { add } from './math/index.js';\nexport { add, sub, mul, div } from './math/index.js';\n\nimport div from './math/div.js';\nexport * as div from './math/div.js';\n\nimport word from './word/index.mjs';\n\nconsole.log(add(2, 1));\n```\n\nDuring the process, `ts-add-js-extension` will traverse the project and analyze the file extensions of JavaScript files being imported or exported. It will then determine whether to add the `.js` or `.mjs` file extension based on the file's original extension.\n\nThis ensures that all the JavaScript files in your project have the correct file extension, enhancing compatibility and ensuring proper import/export functionality.\n\n# Arguments\n\n| Argument    | Usage                                                                                                        | Required | Status     | Default Value |\n| :---------- | :----------------------------------------------------------------------------------------------------------- | :------- | ---------- | ------------- |\n| dir         | Specifies the folder where JavaScript file extension needs to be added                                       | Yes      | Active     | None          |\n| include     | Specifies the folder of files that are imported or included in the dir folder, excluding the specified dir   | No       | Deprecated | []            |\n| showchanges | Determines whether to display progress feedback in the format of `Num. (File Updated) - (SUCCEED or FAILED)` | No       | Active     | True          |\n\n_Please note that the status column indicates whether an argument is active or deprecated, and the default value column specifies the default value if not provided_\n\n# Contributions\n\nI appreciate your active participation in the development process. If you come across any bugs, have feature requests, or need clarification on any aspect of the project, please don't hesitate to open an issue.\n\nAdditionally, your contributions to the project are highly valued. If you have ideas or improvements that you would like to implement, I invite you to suggest a pull request. Simply fork the repository, make the necessary code changes, add relevant tests to ensure quality, and push your changes.\n\nYour feedback and contributions play an essential role in making the project better, and I am grateful for your involvement. Thank you for your support and participation in the development of the project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgervinfung%2Fts-add-js-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgervinfung%2Fts-add-js-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgervinfung%2Fts-add-js-extension/lists"}