Text outside {{..}} can get replaced if it matches PropertyKey

[vjohansen]

typed-string-interpolation/src/index.ts

Line 86 in 61eeab2

return variables[splitItem] ? variables[splitItem] : splitItem

There is a bug when a text fragment matches the PropertyKey

stringInterpolation('foo{{foo}}', { foo: 'bar' })

I get barbar instead of foobar

[vitaly-t]

@vjohansen Since this one has no responce in over a year, check out custom-string-formatter ;)

[vjohansen]

@vitaly-t I did. It does not support my main reason for using typed-string-interpolation.

See the image on the front page with the line

n: 3

To explain more. I want to the following is possible

const makeBold: FC<{ text: string }> = (props): ReactElement => {
  return <b>{props.text}</b>;
};

// In React component
  <div>{stringInterpolation('Mr. {{name}}', { name: makeBold({ text: 'Foreman' })})}</div>

The idea is that the text 'Mr. {{name}}' is simple so it can be given to translators

[vitaly-t]

@vjohansen

With custom-string-format, you can add bold filter and then have a simpler syntax:

<div>{stringInterpolation('Mr. {{name | bold}}', { name: 'Foreman'})}</div>

class BoldFilter implements IFilter {
    transform(value: any) {
        return '<b>' + value + '</b>';
    }
}

If you have a question, happy to discuss it there, because here is probably not quite appropriate :)

[vanska]

@vjohansen I think the "Foreman" example should work just fine or am I missing something? Take a look here:

https://codesandbox.io/p/devbox/typed-string-interpolation-react-example-forked-ydnq9k?workspaceId=ws_AbXSpkbEYP9YbJNRbYS28i

The original issue is still not fixed though and I'll try to take a look at it soon as it propably requires quite a bit of refactoring of the library code.

[vanska]

The original bug is now fixed in version 0.0.10. Let me know if there's something more that is still unclear @vjohansen.

[vjohansen]

Yes, your package works just fine. My comment was directed at vitaly-t and I was trying to explain why your package fits my use case exactly. I don't want complex format string ("{name |bold}". I want bold as a function in the code. So I was just comparing usage examples.

I have tested your change and it works now. Thanks