{"id":22951323,"url":"https://github.com/hichemtab-tech/ts-runtime-picker","last_synced_at":"2025-04-16T02:58:34.342Z","repository":{"id":268032584,"uuid":"903055818","full_name":"HichemTab-tech/ts-runtime-picker","owner":"HichemTab-tech","description":"A package to dynamically create pickers based on TypeScript interfaces.","archived":false,"fork":false,"pushed_at":"2025-04-10T18:59:15.000Z","size":216,"stargazers_count":26,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-10T19:50:29.024Z","etag":null,"topics":["babel","compiler","javascript","js","picker","runtime","runtime-compilation","ts","typescript","typescript-library","vite","vite-plugin"],"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/HichemTab-tech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-12-13T20:50:13.000Z","updated_at":"2025-04-10T18:58:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"7664176d-dd5f-49a1-808a-f2d3045e3859","html_url":"https://github.com/HichemTab-tech/ts-runtime-picker","commit_stats":null,"previous_names":["hichemtab-tech/ts-runtime-picker"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HichemTab-tech%2Fts-runtime-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HichemTab-tech%2Fts-runtime-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HichemTab-tech%2Fts-runtime-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HichemTab-tech%2Fts-runtime-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HichemTab-tech","download_url":"https://codeload.github.com/HichemTab-tech/ts-runtime-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249188179,"owners_count":21227010,"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":["babel","compiler","javascript","js","picker","runtime","runtime-compilation","ts","typescript","typescript-library","vite","vite-plugin"],"created_at":"2024-12-14T15:14:40.009Z","updated_at":"2025-04-16T02:58:34.335Z","avatar_url":"https://github.com/HichemTab-tech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ts-runtime-picker\n\n![GitHub License](https://img.shields.io/github/license/HichemTab-tech/ts-runtime-picker)\n![NPM Version](https://img.shields.io/npm/v/ts-runtime-picker)\n![NPM Downloads](https://img.shields.io/npm/dw/ts-runtime-picker)\n![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/HichemTab-tech/ts-runtime-picker/npm-publish)\n![GitHub Release](https://img.shields.io/github/v/release/HichemTab-tech/ts-runtime-picker)\n\n\n\n**ts-runtime-picker** 🚀 is a TypeScript-first utility package designed to dynamically transform your code and provide runtime-safe \"pickers\" for your objects based on TypeScript interfaces or types. The package integrates seamlessly into your Vite-based or Webpack-based projects, allowing developers to enjoy type-safe runtime logic without sacrificing development speed or flexibility.\n\n---\n\n## 🛠️ Problem and Solution\n\n### 🐛 The Problem\nWhen working with JavaScript or TypeScript, developers often pass objects directly into functions, APIs, or databases (like Firebase). This can lead to unnecessary or unwanted properties being included. For example:\n\n```typescript\nconst request = {\n    data: {\n        firstName: \"John\",\n        lastName: \"Doe\",\n        email: \"john.doe@example.com\",\n        password: \"secret\",\n        extraField: \"notNeeded\",\n        anotherExtraField: \"stillNotNeeded\"\n    }\n};\n\nfirebase.collection(\"users\").add(request.data);\n```\n\nIn this example, only `firstName`, `lastName`, `email`, and `password` might be relevant for the operation, but `extraField` and `anotherExtraField` are also sent, which could cause inefficiencies, validation errors, or unexpected behavior.\n\nEven if you explicitly type `request.data` as `User` in TypeScript, the extra fields (`extraField` and `anotherExtraField`) still exist at runtime. TypeScript enforces types only at compile time, meaning that any additional or unwanted properties are not automatically removed:\n\n```typescript\ninterface User {\n    firstName: string;\n    lastName: string;\n    email: string;\n    password: string;\n}\n\nconst request: { data: User } = {\n    data: {\n        firstName: \"John\",\n        lastName: \"Doe\",\n        email: \"john.doe@example.com\",\n        password: \"secret\",\n        extraField: \"notNeeded\", // This still exists at runtime\n        anotherExtraField: \"stillNotNeeded\" // This too\n    }\n};\n\nfirebase.collection(\"users\").add(request.data); // `extraField` and `anotherExtraField` are still sent!\n```\n\nManually filtering the object to ensure it adheres to a defined interface is tedious and error-prone:\n\n```typescript\nconst filteredData = {\n    firstName: request.data.firstName,\n    lastName: request.data.lastName,\n    email: request.data.email,\n    password: request.data.password\n};\n\nfirebase.collection(\"users\").add(filteredData);\n```\n\n### 💡 The Solution\n`ts-runtime-picker` 🧰 solves this by automatically generating a picker function based on your TypeScript interface. This function ensures that only the properties defined in the interface are included in the object:\n\n```typescript\nimport { createPicker } from \"ts-runtime-picker\";\n\ninterface User {\n    firstName: string;\n    lastName: string;\n    email: string;\n    password: string;\n}\n\nconst picker = createPicker\u003cUser\u003e();\nconst filteredData = picker(request.data);\n\nfirebase.collection(\"users\").add(filteredData);\n```\n\nThe `picker` function dynamically removes unwanted properties, ensuring only the keys specified in `User` are included. This approach:\n\n- ⏳ Saves time by eliminating repetitive manual filtering.\n- ✅ Ensures runtime safety by aligning object properties with TypeScript interfaces.\n- 🐞 Reduces the risk of bugs and inefficiencies caused by sending unnecessary data.\n\n---\n\n## 📦 Installation\n\nTo start using `ts-runtime-picker`, follow these steps:\n\n### 1. Install the Package\n```bash\nnpm install ts-runtime-picker\n```\n\n### 2. Add the Vite Plugin or Webpack Loader\n\n#### Vite Plugin\n\nIn your `vite.config.ts`, import the plugin and include it in the plugins array:\n\n```typescript\nimport { defineConfig } from \"vite\";\nimport TsRuntimePickerVitePlugin from \"ts-runtime-picker/vite-plugin\";\n\nexport default defineConfig({\n    plugins: [TsRuntimePickerVitePlugin()],\n});\n```\n\n#### Webpack Loader\n\nFor projects using Webpack, you can integrate `ts-runtime-picker` with the following webpack loader.\n\n```javascript\nmodule.exports = {\n    //...\n    module: {\n        rules: [\n            {\n                test: /\\.ts$/,\n                use: [\n                    {\n                        loader: 'ts-loader',\n                    },\n                    {\n                        loader: 'ts-runtime-picker/webpack-loader', // add the ts-runtime-picker webpack loader\n                    },\n                ],\n                include: path.resolve(__dirname, 'src'),\n                exclude: /node_modules/,\n            },\n        ],\n    },\n    resolve: {\n        extensions: ['.ts', '.js'],\n        fallback: {\n            fs: false,\n            path: false,\n            os: false,\n            perf_hooks: false,\n        }\n    },\n    //...\n}\n```\n\n---\n\n## ✨ Usage\n\n### 1. Define Your TypeScript Interface\nCreate a TypeScript interface that defines the structure of the object you want to pick keys from:\n\n```typescript\ninterface User {\n    firstName: string;\n    lastName: string;\n    email: string;\n    password: string;\n}\n```\n\n### 2. Use `createPicker`\nCall the `createPicker` function with your TypeScript interface:\n\n```typescript\nimport { createPicker } from \"ts-runtime-picker\";\n\nconst picker = createPicker\u003cUser\u003e();\n\nconst inputObject = {\n    firstName: \"John\",\n    lastName: \"Doe\",\n    email: \"john.doe@example.com\",\n    password: \"secret\",\n    extraField: \"notNeeded\",\n};\n\nconst result = picker(inputObject);\nconsole.log(result); // { firstName: \"John\", lastName: \"Doe\", email: \"john.doe@example.com\", password: \"secret\" }\n```\n\n### 3. How It Works\nThe plugin dynamically transforms the `createPicker\u003cUser\u003e()` call into a runtime-safe implementation that picks only the keys defined in `User`. This transformation works with both Vite (via the plugin) and Webpack (via the loader).\n\n---\n\n## 🎯 Purpose and Benefits\n\nThe goal of `ts-runtime-picker` is to bridge the gap between TypeScript's compile-time type safety and runtime JavaScript functionality. By transforming your code at build time, this package enables developers to:\n\n- 🚫 Avoid repetitive manual key picking from objects.\n- ⚡ Ensure runtime behavior aligns with TypeScript-defined interfaces.\n- 🎉 Simplify code while maintaining type safety.\n- 🛠 Works seamlessly with modern bundlers, including Vite (via a plugin) and Webpack (via a loader).\n---\n\n\n\n## Contributing\n\nWe welcome contributions! If you'd like to improve `ts-runtime-picker`, feel free to [open an issue](https://github.com/HichemTab-tech/ts-runtime-picker/issues) or [submit a pull request](https://github.com/HichemTab-tech/ts-runtime-picker/pulls).\n\n## Author\n\n- [@HichemTab-tech](https://www.github.com/HichemTab-tech)\n\n## License\n\n[MIT](https://github.com/HichemTab-tech/ts-runtime-picker/blob/master/LICENSE)\n\n## 🌟 Acknowledgements\n\nSpecial thanks to the open-source community and early adopters of `ts-runtime-picker` for their feedback, which helped expand support to Webpack alongside Vite.\n\n\u003c!-- GitAds-Verify: 9JJRMB9BB1DIYMRFCFC1V6GB2EJ7TCHJ --\u003e\n\n\n## GitAds Sponsored\n[![Sponsored by GitAds](https://gitads.dev/v1/ad-serve?source=hichemtab-tech/ts-runtime-picker@github)](https://gitads.dev/v1/ad-track?source=hichemtab-tech/ts-runtime-picker@github)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhichemtab-tech%2Fts-runtime-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhichemtab-tech%2Fts-runtime-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhichemtab-tech%2Fts-runtime-picker/lists"}