{"_id":"@aleen42/counter-style","name":"@aleen42/counter-style","dist-tags":{"latest":"2.0.3-beta.0"},"versions":{"2.0.3-beta.0":{"name":"@aleen42/counter-style","version":"2.0.3-beta.0","description":"CSS Counter Styles Level 3 and presets","main":"lib/cjs/index.js","module":"lib/es/index.js","react-native":"lib/es/index.js","types":"types/counter-style/index.d.ts","sideEffects":false,"scripts":{"autogen-presets-index":"node scripts/generatePresetsIndex.js","test":"yarn test:ts && yarn test:lint && yarn test:jest && yarn test:size","test:jest":"jest src/","test:ts":"tsc --noEmit","test:lint":"eslint --ext ts,tsx src/","test:size":"size-limit","build":"node scripts/build.js","build:clean":"rimraf ./lib","build:es":"tsc -p tsconfig.build-es.json","build:cjs":"tsc -p tsconfig.build-cjs.json","build:presets":"node scripts/generatePresets.js","build:defs":"api-extractor run --local --verbose","build:doc":"api-documenter markdown --input-folder temp --output-folder ./docs","prepack":"yarn run build"},"keywords":["CSS Counter Styles Level 3","lists","ol","ul","li"],"devDependencies":{"@babel/cli":"^7.13.14","@babel/core":"^7.13.15","@babel/preset-typescript":"^7.13.0","@babel/runtime":"^7.13.10","@microsoft/api-documenter":"^7.12.20","@microsoft/api-extractor":"7.13.4","@release-it/conventional-changelog":"^2.0.0","@size-limit/preset-small-lib":"^4.10.2","@types/jest":"^26.0.22","babel-jest":"^26.6.3","eslint":"^7.23.0","jest":"^26.6.3","prettier":"^2.2.1","react-native-builder-bob":"^0.18.1","release-it":"^14.3.0","rimraf":"^3.0.2","size-limit":"^4.10.2","typescript":"~4.2.4"},"author":{"name":"Jules Sam. Randolph","email":"jules.sam.randolph@gmail.com","url":"https://github.com/jsamr"},"homepage":"https://github.com/jsamr/react-native-li/tree/master/packages/react-native-li#readme","license":"MIT","repository":{"type":"git","directory":"packages/counter-style","url":"git+ssh://git@github.com/jsamr/react-native-li.git"},"publishConfig":{"access":"public"},"size-limit":[{"path":"lib/es/index.js","limit":"1.70 KB","gzip":true},{"path":"lib/cjs/index.js","limit":"2.00 KB","gzip":true}],"react-native-builder-bob":{"source":"src","output":"lib","targets":[["module",{"babelrc":false}],["commonjs",{"babelrc":false}],["typescript",{"project":"tsconfig.build.json"}]]},"gitHead":"ad56f94345c3c94c623f5a3552c160212b55bf81","bugs":{"url":"https://github.com/jsamr/react-native-li/issues"},"_id":"@aleen42/counter-style@2.0.3-beta.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-tUUbwsN79ty+iRf6yOhHfJjCHycff63DiD5LL9rk9H/nk0bPqOCit7gn+lAgXul77sbD5rOI2M3PBCPzwwvp5w==","shasum":"c3be74b6f1224122efa0bc0badad67240aa0b367","tarball":"https://registry.npmjs.org/@aleen42/counter-style/-/counter-style-2.0.3-beta.0.tgz","fileCount":525,"unpackedSize":399498,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCm06K1OcdXPRLSTPfXUja4Ay79KeHaTLx9sRLMfDZLFQIgLmRSh6+uUp7fI7+o4nQ+Tl/kWiOLPcQ3qs2jau8GfEM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfNZbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxSQ//V8kNMkwBaZL2R5d42Uz03AXcFkayYcSkm2ZjQiBoEfNHM1rr\r\n0kke4r39CmnELB6LIEtUhXCYuV/YPFIHpmM39OiR51xl/GwVyaPEonadBFR+\r\n3Xl94SEnwVd55+gLKmE+0skvHPmn3+y6Q8wP3wFMhV9Q7limw2b88eQgNBBB\r\nvHsR6cCqUj4ZpM+IHex1nqx6lfblrMzii+3g3f+LB4u1SNgqaHTXWBlwomUM\r\nWWxHoQgwwPbH+KLhLTLNVOJlE2+KMaKCASAEqK5ri/xRiiGOJUACa81rKaMi\r\nhNFTyaZ0UXTNLqGB4DlkiX6OZccPSaHo9eReLNhQQG32v0pRSOZshAcOoaJO\r\n10rQQW1hUXjCxIatR+fBGxIuGpxa4ghs6KorJe7M+eJcYaufmXZOFY9b8rM+\r\ni6/URon7J63OsuCbx6kp+jdEUreBr9B/4FuJtGXAW/Nc57Iru3eNwrVxvD3j\r\n6MfXKzjPpd59tUo1Mjjqub+IARNw3zK1Kfz6iHViPTWP7+8qVB5aakjuKbJd\r\newmGLDXoDUccaFWmwJKMJdl3fezFxB96sR+5BR7jOrD+yDgvaNdn+xp8/k19\r\nEiv4gAniO8t5x0pWEaPyFpYgGp2PdfAWIg72IfJ2I0FRBu7K2uGJZUNuSfvC\r\nkRfAwmcEZjBOTe5G0+cwGpso+oMg0NBmtZI=\r\n=JrZV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"aleen42","email":"aleen42@vip.qq.com"},"directories":{},"maintainers":[{"name":"aleen42","email":"aleen42@vip.qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/counter-style_2.0.3-beta.0_1669125723744_0.8658657484909642"},"_hasShrinkwrap":false}},"time":{"created":"2022-11-22T14:02:03.658Z","2.0.3-beta.0":"2022-11-22T14:02:03.923Z","modified":"2022-11-22T14:02:04.087Z"},"maintainers":[{"name":"aleen42","email":"aleen42@vip.qq.com"}],"description":"CSS Counter Styles Level 3 and presets","homepage":"https://github.com/jsamr/react-native-li/tree/master/packages/react-native-li#readme","keywords":["CSS Counter Styles Level 3","lists","ol","ul","li"],"repository":{"type":"git","directory":"packages/counter-style","url":"git+ssh://git@github.com/jsamr/react-native-li.git"},"author":{"name":"Jules Sam. Randolph","email":"jules.sam.randolph@gmail.com","url":"https://github.com/jsamr"},"bugs":{"url":"https://github.com/jsamr/react-native-li/issues"},"license":"MIT","readme":"<h1 align=\"center\">@aleen42/counter-style</h1>\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/@aleen42/counter-style\"\n    ><img\n      src=\"https://img.shields.io/npm/v/@aleen42/counter-style\"\n      alt=\"npm\"\n  /></a>\n  <a href=\"https://semver.org/spec/v2.0.0.html\"\n    ><img\n      src=\"https://img.shields.io/badge/semver-2.0.0-e10079.svg\"\n      alt=\"semver\"\n  /></a>\n  <a href=\"https://codecov.io/gh/jsamr/react-native-li?flag=counter-style\"\n    ><img\n      src=\"https://codecov.io/gh/jsamr/react-native-li/branch/master/graph/badge.svg?flag=counter-style\"\n      alt=\"codecov\"\n  /></a>\n  <a\n    href=\"https://github.com/jsamr/react-native-li/actions?query=branch%3Amaster+workflow%3Acounter-style\"\n    ><img\n      src=\"https://github.com/jsamr/react-native-li/workflows/counter-style/badge.svg?branch=master\"\n      alt=\"CI\"\n  /></a>\n  <a href=\"https://www.npmjs.com/package/@aleen42/counter-style\">\n    <img\n      src=\"https://img.shields.io/npm/dm/@aleen42/counter-style.svg\"\n      alt=\"DL/month\"\n    />\n  </a>\n</p>\n\n<p align=\"center\">\n  A slim <a href=\"https://drafts.csswg.org/css-counter-styles-3\">CSS Counter Styles Level 3 compliant</a> library with <a href=\"./src/presets\">47 presets</a> including<br> <b>Arabic</b>, <b>Persian</b>, <b>Thai</b>, <b>Hebrew</b>, <b>Roman</b>, <b>Katana</b>...<br><br>\n  The core is less than 1.7kB minified and gzipped.<br>\n  Each preset is distributed as a separate module.<br>\n  Available in both CommonJS and ECMAScript modules. <br>\n  Targets ECMAScript 2015.<br>\n  Optimized for metro (React Native) and Webpack bundlers.<br>\n  Based on <a href=\"https://github.com/beanandbean/counter-style\">prior work from Whang Shuwei</a>.\n</p>\n\n<hr/>\n\n### Install\n\n```sh\nnpm add --save @aleen42/counter-style\n```\n\n```sh\nyarn add @aleen42/counter-style\n```\n\n### Using presets\n\n**This library exports 47 presets. [Find your preset here.](./src/presets)** Each preset is accessible in a separate module to limit bundle size.\n\n```js\nimport arabicIndic from '@aleen42/counter-style/presets/arabicIndic';\n\nexpect(arabicIndic.renderMarker(78)).toBe('٧٨. ');\n```\n\n> PRs are welcomed to support other presets. Very easy to implement thanks to [this W3C resource](https://www.w3.org/TR/predefined-counter-styles/).\n\n\n<a name=\"custom-style-renderers\">\n\n### Creating custom style renderers\n\nThe API follows closely the specs for CSS `@counter-style` at rule. The default export ([CounterStyle](./docs/counter-style.counterstyle.md)) is a static object with methods to build [CounterStyleRenderer](./docs/counter-style.counterstylerenderer.md).\n\n#### Example 1: a lower Russian alphabet renderer\n\nIn the\nbelow example, we're using [the alphabetic counter system](https://www.w3.org/TR/css-counter-styles-3/#alphabetic-system) and `alphabeticFromUnicodeRange` builder which allows to specify a contiguous unicode range. For non-contiguous ranges, use the `alphabetic` builder.\n\n```js\nimport CounterStyle from '@aleen42/counter-style';\n\nconst lowerRussian = CounterStyle.alphabeticFromUnicodeRange(\n  0x430, // а\n  28\n).withSuffix(') ');\n\n// Expect comes from jest testing framework.\n// Just a showcase of expected returned values.\nexpect(lowerRussian.renderCounter(1)).toBe('а');\nexpect(lowerRussian.renderMarker(1)).toBe('а) ');\nexpect(lowerRussian.renderCounter(2)).toBe('б');\nexpect(lowerRussian.renderCounter(3)).toBe('в');\nexpect(lowerRussian.renderMarker(4)).toBe('г) ');\nexpect(lowerRussian.renderMarker(5)).toBe('д) ');\nexpect(lowerRussian.renderCounter(29)).toBe('аа');\nexpect(lowerRussian.maxMarkerLenInRange(1, 5)).toBe(3);\nexpect(lowerRussian.maxCounterLenInRange(1, 5)).toBe(1);\n```\nReference: [W3C Ready-made Counter Styles: Cyrillic styles](https://www.w3.org/TR/predefined-counter-styles/#cyrillic-styles).\n\n#### Example 2: a \"Funky\" symbolic renderer\n\nIn the\nbelow example, we're using [the symbolic counter system](https://www.w3.org/TR/css-counter-styles-3/#symbolic-system).\nNote that `withSuffix(null)` removes default suffix.\n\n```js\nimport CounterStyle from '@aleen42/counter-style';\n\n// Default suffix is \". \", as per the specs.\nconst funky = CounterStyle.symbolic('*', '&').withSuffix(null);\n\n// Expect comes from jest testing framework.\n// Just a showcase of expected returned values.\nexpect(funky.renderMarker(1)).toBe('*');\nexpect(funky.renderMarker(2)).toBe('&');\nexpect(funky.renderMarker(3)).toBe('**');\nexpect(funky.renderMarker(4)).toBe('&&');\nexpect(funky.renderMarker(5)).toBe('***');\nexpect(funky.maxMarkerLenInRange(1, 5)).toBe(3);\nexpect(funky.maxCounterLenInRange(1, 5)).toBe(3);\n```\n\nAll renderers can be chained to create variants, such as `withSuffix`,\n`withPaddingLeft`, ... See [available methods in the docs.](./docs/counter-style.counterstylerenderer.md)\n\n### API reference\n\n**The API reference [is available here](./docs/counter-style.md).**\n\n### Caveats\n\n- Instead of a normal space character, a non-breaking space is used for default\n  prefixes. This is because this library primary usage is for React Native. On\n  iOS, `Text` elements get trimmed of normal space characters.\n- In **numeric** and **alphabetic** systems , one UTF-16 code unit per symbol\n  must be used. Otherwise, length computation will be erroneous. If you really\n  need multi code units per symbol however, you can still set a custom length\n  computer via `withMaxLenComputer`.\n- When using padding (`withPadding`) and negative (`withNegative`) symbols, one\n  UTF-16 code unit per symbol must be used. Otherwise, length computation will\n  be erroneous.\n- Never use combining characters. [Grapheme\n  clusters](https://www.w3.org/TR/css-text-3/#grapheme-cluster) will be\n  considered distinct characters. Beware that is the case for some emojis, see\n  [this SO thread](https://stackoverflow.com/q/54369513/2779871).\n- Don't define incomplete additive systems which have holes in their range\n  coverage. For example, an additive system which has no representation for \"1\"\n  will not translate odd indexes.\n\n### Limitations\n\n- `speakAs` hasn't been implemented yet.\n  haven't been implemented, requiring custom logic. PRs welcomed!\n- Only textual symbols are supported. Images are not.\n","readmeFilename":"README.md"}