|
| 1 | +# Typed string interpolation |
| 2 | + |
| 3 | +[String interpolation](https://en.wikipedia.org/wiki/String_interpolation) utility that returns the correct type based on passed in variable substitutions. |
| 4 | + |
| 5 | +## Main features |
| 6 | + |
| 7 | +- Replaces variables within a string with passed in variables |
| 8 | +- Sanity checks that correct variables were passed in |
| 9 | +- Returns the correct type based on passed in variable substitutions |
| 10 | +- Options to customize return, pattern matching and sanity checking |
| 11 | +- Both `.cjs` and `mjs` distributions available. Use anywhere! |
| 12 | + |
| 13 | +## Install |
| 14 | + |
| 15 | +```bash |
| 16 | +npm i typed-string-interpolation |
| 17 | +``` |
| 18 | + |
| 19 | +## Usage |
| 20 | + |
| 21 | +```ts |
| 22 | +// ES module |
| 23 | +import { stringInterpolation } from "typed-string-interpolation" |
| 24 | +// CommonJS |
| 25 | +const { stringInterpolation } = require("typed-string-interpolation") |
| 26 | +``` |
| 27 | + |
| 28 | +```ts |
| 29 | +stringInterpolation("hello {{world}}", { |
| 30 | + world: "world", |
| 31 | +}) // "hello world" |
| 32 | +``` |
| 33 | + |
| 34 | +Pass in anything you want an get back sane results when interpolation result shouldn't be turned into a `string`: |
| 35 | + |
| 36 | +```tsx |
| 37 | +stringInterpolation("hello {{world}} with {{anything}}", { |
| 38 | + world: "world", |
| 39 | + anything: <span className="bold">anything</span>, |
| 40 | +}) |
| 41 | +``` |
| 42 | + |
| 43 | +Returns an array for easy use with libraries like `react` or anything else! |
| 44 | + |
| 45 | +```tsx |
| 46 | +const interpolationResult = [ |
| 47 | + "hello ", |
| 48 | + "world", |
| 49 | + " with ", |
| 50 | + <span className="bold">anything</span>, |
| 51 | +] |
| 52 | +``` |
| 53 | + |
| 54 | +## TypeScript support |
| 55 | + |
| 56 | +If the string can be joined you'll get back a string. Otherwise a union type within an array is returned based on the passed in variables. |
| 57 | + |
| 58 | +```ts |
| 59 | +stringInterpolation("hello {{world}} with number {{number}}", { |
| 60 | + world: "world", |
| 61 | + number: 1, |
| 62 | +}) // => Returns type: string |
| 63 | +``` |
| 64 | + |
| 65 | +```tsx |
| 66 | +stringInterpolation("hello {{world}} with number {{number}}", { |
| 67 | + world: <span className="bold">world</span>, |
| 68 | + number: 1, |
| 69 | +}) // => Returns type: (string | JSX.Element | number)[] |
| 70 | +``` |
| 71 | + |
| 72 | +## Options |
| 73 | + |
| 74 | +Takes in an optional third parameter for options: |
| 75 | + |
| 76 | +```js |
| 77 | +stringInterpolation(str, variables, options) |
| 78 | +``` |
| 79 | + |
| 80 | +```ts |
| 81 | +type Options = { |
| 82 | + raw?: boolean // default: false |
| 83 | + pattern?: RegExp // default: new RegExp(/\{{([^{]+)}}/g) |
| 84 | + sanity?: boolean // default: true |
| 85 | +} |
| 86 | +``` |
| 87 | +
|
| 88 | +`raw` |
| 89 | +
|
| 90 | +Return the raw interpolation results without joining to string when you want full control for some reason. |
| 91 | +
|
| 92 | +```tsx |
| 93 | +stringInterpolation( |
| 94 | + "hello {{world}} with number {{number}}", |
| 95 | + { |
| 96 | + world: "world", |
| 97 | + number: 1, |
| 98 | + }, |
| 99 | + { raw: true } |
| 100 | +) // => Returns type: (string | number)[] |
| 101 | +``` |
| 102 | +
|
| 103 | +`pattern` |
| 104 | +
|
| 105 | +Provide your own `RegExp` pattern for variable matching. Must be defined as: |
| 106 | +
|
| 107 | +```ts |
| 108 | +pattern: new RegExp(/\{{([^{]+)}}/g) |
| 109 | +``` |
| 110 | +
|
| 111 | +`sanity` |
| 112 | +
|
| 113 | +If you want to live dangerously, sanity checking can be turned off. |
| 114 | +
|
| 115 | +```ts |
| 116 | +{ |
| 117 | + sanity: false |
| 118 | +} |
| 119 | +``` |
| 120 | +
|
| 121 | +Turning of sanity checking removes `throw` from: |
| 122 | +
|
| 123 | +- empty string |
| 124 | +- string variables and passed in variables count mismatch |
| 125 | +- missing variables |
| 126 | +
|
| 127 | +## Contributing |
| 128 | +
|
| 129 | +API suggestions are welcome and greatly appreciated. |
| 130 | +
|
| 131 | +Basic steps for contributing for a release: |
| 132 | +
|
| 133 | +- Fork `main` |
| 134 | +- `npm ci` |
| 135 | +- Run tests `npm run test` |
| 136 | +- Create a changeset with `npx changeset` |
| 137 | +- Commit and push changes |
| 138 | +- Open a pull request |
0 commit comments