{"id":13759585,"url":"https://github.com/ybiquitous/bem-ts","last_synced_at":"2025-04-08T21:31:22.303Z","repository":{"id":39328770,"uuid":"119577836","full_name":"ybiquitous/bem-ts","owner":"ybiquitous","description":"BEM class names generator for TypeScript","archived":false,"fork":false,"pushed_at":"2024-04-01T06:19:34.000Z","size":6826,"stargazers_count":14,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-04-14T05:57:05.671Z","etag":null,"topics":["bem","classnames","typescript","utility"],"latest_commit_sha":null,"homepage":"https://npm.im/bem-ts","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/ybiquitous.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-01-30T18:37:14.000Z","updated_at":"2024-05-01T06:35:43.996Z","dependencies_parsed_at":"2024-02-01T06:28:54.586Z","dependency_job_id":"0f27b75b-a59e-475b-b008-2c3ef877d9d5","html_url":"https://github.com/ybiquitous/bem-ts","commit_stats":{"total_commits":860,"total_committers":11,"mean_commits":78.18181818181819,"dds":0.7255813953488373,"last_synced_commit":"c4f995b2632855715d7ad4ecf564733e48533362"},"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ybiquitous%2Fbem-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ybiquitous%2Fbem-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ybiquitous%2Fbem-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ybiquitous%2Fbem-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ybiquitous","download_url":"https://codeload.github.com/ybiquitous/bem-ts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247931331,"owners_count":21020215,"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":["bem","classnames","typescript","utility"],"created_at":"2024-08-03T13:00:55.719Z","updated_at":"2025-04-08T21:31:17.295Z","avatar_url":"https://github.com/ybiquitous.png","language":"TypeScript","funding_links":[],"categories":["目录"],"sub_categories":["Frontend"],"readme":"# bem-ts\n\n[![npm](https://img.shields.io/npm/v/bem-ts)](https://npm.im/bem-ts)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/bem-ts)](https://bundlephobia.com/package/bem-ts)\n[![node](https://img.shields.io/node/v/bem-ts)](https://github.com/ybiquitous/bem-ts)\n\n[BEM](http://getbem.com/) (_Block Element Modifier_) class names generator for TypeScript.\n\nInspired by [`bem-cn`](https://npm.im/bem-cn).\n\n## Policy\n\n- No extra features.\n- No dependencies.\n- TypeScript support.\n\n## Install\n\n```shell\nnpm install bem-ts\n```\n\n## Usage\n\nA basic usage:\n\n```typescript\nimport bem from \"bem-ts\";\n\nconst b = bem(\"block\");\n\nb();\n//=\u003e \"block\"\n\nb({ mod1: true, mod2: false });\n//=\u003e \"block block--mod1\"\n\nb({ mod1: true, mod2: false, mod3: true });\n//=\u003e \"block block--mod1 block--mod3\"\n\nb([\"mod1\", null, \"mod3\"]);\n//=\u003e \"block block--mod1 block--mod3\"\n\nb(\"element\");\n//=\u003e \"block__element\"\n\nb(\"element\", { mod1: true, mod2: false });\n//=\u003e \"block__element block__element--mod1\"\n\nb(\"element\", { mod1: true, mod2: false, mod3: true });\n//=\u003e \"block__element block__element--mod1 block__element--mod3\"\n\nb(\"element\", [\"mod1\", null, \"mod3\"]);\n//=\u003e \"block__element block__element--mod1 block__element--mod3\"\n```\n\nA more complex example using React and CSS (closer to the real world):\n\n```tsx\n// Button.tsx\nimport React from \"react\";\nimport bem from \"bem-ts\";\nimport \"./Button.css\";\n\nconst b = bem(\"Button\");\n\ntype Props = {\n  state: \"success\" | \"danger\";\n  icon: React.ReactNode;\n  children: React.ReactNode;\n};\n\nexport function Button({ state, icon, children }: Props) {\n  return (\n    \u003cbutton className={b([state])}\u003e\n      \u003ci className={b(\"icon\", [state])}\u003e{icon}\u003c/i\u003e\n      {children}\n    \u003c/button\u003e\n  );\n}\n```\n\n```css\n/* Button.css */\n.Button {\n  /* Block */\n}\n.Button--success {\n  /* Modifier */\n}\n.Button--danger {\n  /* Modifier */\n}\n.Button__icon {\n  /* Element */\n}\n.Button__icon--success {\n  /* Element's modifier */\n}\n.Button__icon--danger {\n  /* Element's modifier */\n}\n```\n\n## Demo\n\n[![Edit bem-ts demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/kxymx2r2z5)\n\n## API\n\n### `bem()`\n\nThe `bem()` function receives a block name and creates a new function that generates class names. The created function can receive elements or modifiers.\n\nThe function can receive the following options:\n\n| Name                                        | Type                 | Default |\n| ------------------------------------------- | -------------------- | ------- |\n| [`elementDelimiter`](#elementdelimiter)     | `string`             | `\"__\"`  |\n| [`modifierDelimiter`](#modifierdelimiter)   | `string`             | `\"--\"`  |\n| [`namespace`](#namespace)                   | `string`, `string[]` | `\"\"`    |\n| [`namespaceDelimiter`](#namespacedelimiter) | `string`             | `\"-\"`   |\n| [`strict`](#strict)                         | `boolean`            | `true`  |\n\n#### `elementDelimiter`\n\n```typescript\nconst b = bem(\"block\", { elementDelimiter: \"_\" });\n\nb(\"element\");\n//=\u003e \"block_element\"\n```\n\n#### `modifierDelimiter`\n\n```typescript\nconst b = bem(\"block\", { modifierDelimiter: \"-\" });\n\nb({ mod: true });\n//=\u003e block \"block-mod\"\n\nb(\"element\", { mod: true });\n//=\u003e \"block__element block__element-mod\"\n```\n\n#### `namespace`\n\n```typescript\nconst b = bem(\"block\", { namespace: \"ns\" });\n\nb();\n//=\u003e \"ns-block\"\n\nb(\"element\", { mod1: true, mod2: true });\n//=\u003e \"ns-block__element ns-block__element--mod1 ns-block__element--mod2\"\n```\n\n```typescript\nconst b = bem(\"block\", { namespace: [\"ns1\", \"ns2\"] });\n\nb();\n//=\u003e \"ns1-ns2-block\"\n\nb(\"element\", { mod1: true, mod2: true });\n//=\u003e \"ns1-ns2-block__element ns1-ns2-block__element--mod1 ns1-ns2-block__element--mod2\"\n```\n\n#### `namespaceDelimiter`\n\n```typescript\nconst b = bem(\"block\", { namespace: \"ns\", namespaceDelimiter: \"---\" });\n\nb();\n//=\u003e \"ns---block\"\n\nb(\"element\", { mod1: true, mod2: true });\n//=\u003e \"ns---block__element ns---block__element--mod1 ns---block__element--mod2\"\n```\n\nWhen `namespace` is not given, `namespaceDelimiter` will be ignored.\n\n```typescript\nconst b = bem(\"block\", { namespaceDelimiter: \"---\" });\n\nb();\n//=\u003e \"block\"\n\nb(\"element\", { mod1: true, mod2: true });\n//=\u003e \"block__element block__element--mod1 block__element--mod2\"\n```\n\n#### `strict`\n\nWhen you set `true` to this option, given elements or modifiers are checked. And if the check fails, then a runtime error is thrown.\n\nFor example, when setting `true`, the following code throws an error.\n\n```typescript\nconst b = bem(\"foo\", { strict: true });\nb(\"element__\");\nb({ modifier--: true });\n```\n\nWhen setting `false`, the following code throws no errors.\n\n```typescript\nconst b = bem(\"foo\", { strict: false });\nb(\"element__\");\n//=\u003e foo__element__\nb({ modifier_: true });\n//=\u003e foo__modifier_\n```\n\n### `setup()`\n\nThe `setup()` function can change the default options.\n\n```typescript\nimport bem, { setup } from \"bem-ts\";\n\nsetup({\n  elementDelimiter: \"_\",\n  modifierDelimiter: \"-\",\n  namespace: \"ns\",\n  namespaceDelimiter: \"---\",\n  strict: false,\n});\n\nconst b = bem(\"block\");\n\nb(\"element\", { mod: true });\n//=\u003e \"ns---block_element ns---block_element-mod\"\n```\n\n## License\n\n[MIT](LICENSE) © Masafumi Koba\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fybiquitous%2Fbem-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fybiquitous%2Fbem-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fybiquitous%2Fbem-ts/lists"}