@doist/react-interpolate 0.3.0 → 0.3.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/nodejs.yml +17 -17
- package/.github/workflows/publish.yml +53 -0
- package/.nvmrc +1 -0
- package/README.md +38 -35
- package/package.json +64 -65
- package/dist/react-interpolate.min.cjs.gz +0 -0
- package/dist/react-interpolate.min.mjs.gz +0 -0
|
@@ -3,22 +3,22 @@ name: CI
|
|
|
3
3
|
on: [push, pull_request]
|
|
4
4
|
|
|
5
5
|
jobs:
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
build:
|
|
7
|
+
runs-on: ubuntu-latest
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
strategy:
|
|
10
|
+
matrix:
|
|
11
|
+
node-version: [16.x]
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
13
|
+
steps:
|
|
14
|
+
- uses: actions/checkout@v2
|
|
15
|
+
- name: Use Node.js ${{ matrix.node-version }}
|
|
16
|
+
uses: actions/setup-node@v1
|
|
17
|
+
with:
|
|
18
|
+
node-version: ${{ matrix.node-version }}
|
|
19
|
+
- run: npm ci
|
|
20
|
+
- run: npm run build
|
|
21
|
+
- run: npm test
|
|
22
|
+
env:
|
|
23
|
+
CI: true
|
|
24
|
+
- run: npm run lint
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
name: Release @doist/react-interpolate package
|
|
2
|
+
|
|
3
|
+
on:
|
|
4
|
+
release:
|
|
5
|
+
types: [created]
|
|
6
|
+
workflow_dispatch:
|
|
7
|
+
|
|
8
|
+
jobs:
|
|
9
|
+
publish:
|
|
10
|
+
runs-on: ubuntu-latest
|
|
11
|
+
steps:
|
|
12
|
+
- uses: actions/checkout@v2
|
|
13
|
+
|
|
14
|
+
- name: Read Node.js version from '.nvmrc'
|
|
15
|
+
id: nvmrc
|
|
16
|
+
run: |
|
|
17
|
+
echo "::set-output name=NODE_VERSION::$(cat .nvmrc)"
|
|
18
|
+
|
|
19
|
+
- name: Setup Node
|
|
20
|
+
uses: actions/setup-node@v1
|
|
21
|
+
with:
|
|
22
|
+
node-version: ${{ steps.nvmrc.outputs.NODE_VERSION }}
|
|
23
|
+
|
|
24
|
+
- name: Install dependencies
|
|
25
|
+
run: npm ci
|
|
26
|
+
|
|
27
|
+
- name: Lint
|
|
28
|
+
run: npm run lint
|
|
29
|
+
env:
|
|
30
|
+
CI: true
|
|
31
|
+
|
|
32
|
+
- name: Build
|
|
33
|
+
run: npm run build
|
|
34
|
+
|
|
35
|
+
- name: Publish to GitHub Package Registry
|
|
36
|
+
uses: actions/setup-node@v1
|
|
37
|
+
with:
|
|
38
|
+
node-version: ${{ steps.nvmrc.outputs.NODE_VERSION }}
|
|
39
|
+
registry-url: https://npm.pkg.github.com/
|
|
40
|
+
scope: "@doist"
|
|
41
|
+
- run: npm publish
|
|
42
|
+
env:
|
|
43
|
+
NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
|
|
44
|
+
|
|
45
|
+
- name: Publish to npm registry
|
|
46
|
+
uses: actions/setup-node@v1
|
|
47
|
+
with:
|
|
48
|
+
node-version: ${{ steps.nvmrc.outputs.NODE_VERSION }}
|
|
49
|
+
registry-url: https://registry.npmjs.org/
|
|
50
|
+
scope: "@doist"
|
|
51
|
+
- run: npm publish
|
|
52
|
+
env:
|
|
53
|
+
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
|
package/.nvmrc
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
16.13.0
|
package/README.md
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
# react-interpolate
|
|
2
2
|
|
|
3
|
-
[](http://img.badgesize.io/https://cdn.jsdelivr.net/gh/Doist/react-interpolate/dist/react-interpolate.min.cjs?compression=gzip)
|
|
4
|
-
[](https://github.com/Doist/react-interpolate/actions)
|
|
5
|
-
|
|
3
|
+
[](http://img.badgesize.io/https://cdn.jsdelivr.net/gh/Doist/react-interpolate/dist/react-interpolate.min.cjs?compression=gzip) [](https://github.com/Doist/react-interpolate/actions)
|
|
6
4
|
|
|
7
5
|
A string interpolation component that formats and interpolates a template string in a safe way.
|
|
8
6
|
|
|
@@ -25,24 +23,27 @@ function Greeting() {
|
|
|
25
23
|
Would render the following HTML
|
|
26
24
|
|
|
27
25
|
```html
|
|
28
|
-
<h1>
|
|
26
|
+
<h1>
|
|
27
|
+
Hello William. Here is <a href="https://orderinfo.com">your order info</a>
|
|
28
|
+
</h1>
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
-
|
|
32
31
|
## Component API
|
|
33
32
|
|
|
34
33
|
`<Interpolate>` component accepts the following props
|
|
35
34
|
|
|
36
35
|
#### `string`
|
|
37
|
-
The template string to be interpolated. Required.
|
|
38
36
|
|
|
39
|
-
|
|
37
|
+
The template string to be interpolated. Required.
|
|
38
|
+
|
|
39
|
+
Please see the [Interpolation syntax](./#interpolation-syntax) section below for more detail.
|
|
40
40
|
|
|
41
|
-
#### `mapping`
|
|
42
|
-
An object that defines the values to be injected for placeholder and tags defined in the template string. Optional.
|
|
41
|
+
#### `mapping`
|
|
43
42
|
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
An object that defines the values to be injected for placeholder and tags defined in the template string. Optional.
|
|
44
|
+
|
|
45
|
+
- For placeholder or self-closing tag, the mapping value could be any valid element value
|
|
46
|
+
- For open & close tag, the mapping value could be either renderer function or an element.
|
|
46
47
|
|
|
47
48
|
```jsx
|
|
48
49
|
<Interpolate
|
|
@@ -54,9 +55,7 @@ An object that defines the values to be injected for placeholder and tags define
|
|
|
54
55
|
hr: <hr className="break" />,
|
|
55
56
|
|
|
56
57
|
// you can map open & close tag to a rendering function
|
|
57
|
-
orderLink: text =>
|
|
58
|
-
<a href="https://orderinfo.com">{text}</a>
|
|
59
|
-
),
|
|
58
|
+
orderLink: text => <a href="https://orderinfo.com">{text}</a>,
|
|
60
59
|
|
|
61
60
|
// or you can map open & close tag to an element
|
|
62
61
|
supportLink: <a href="https://orderinfo.com" />
|
|
@@ -64,26 +63,21 @@ An object that defines the values to be injected for placeholder and tags define
|
|
|
64
63
|
/>
|
|
65
64
|
```
|
|
66
65
|
|
|
66
|
+
#### `graceful`
|
|
67
67
|
|
|
68
|
-
|
|
69
|
-
A boolean flag indicates how string syntax error or mapping error should be handled. When true, the raw string value from the prop `string` would be rendered as a fallback in the error scenario. When false, error would be thrown instead.
|
|
68
|
+
A boolean flag indicates how string syntax error or mapping error should be handled. When true, the raw string value from the prop `string` would be rendered as a fallback in the error scenario. When false, error would be thrown instead.
|
|
70
69
|
|
|
71
70
|
Optional. `true` by default.
|
|
72
71
|
|
|
73
|
-
|
|
74
72
|
```jsx
|
|
75
73
|
// would render "an invalid string with unclose tag <h1>"
|
|
76
|
-
<Interpolate
|
|
77
|
-
graceful
|
|
78
|
-
string="an invalid string with unclose tag <h1>"
|
|
79
|
-
/>
|
|
74
|
+
<Interpolate graceful string="an invalid string with unclose tag <h1>" />
|
|
80
75
|
```
|
|
81
76
|
|
|
82
|
-
#### `syntax`
|
|
77
|
+
#### `syntax`
|
|
83
78
|
|
|
84
79
|
Optional. `syntax` props allow use of react-Interpolate with different string formatting syntax. Please see the ["Custom syntax support"](#custom-syntax-support) section for more detail.
|
|
85
80
|
|
|
86
|
-
|
|
87
81
|
## Interpolation syntax
|
|
88
82
|
|
|
89
83
|
Here is interpolation syntax you can use in your `string`.
|
|
@@ -108,9 +102,9 @@ Placeholder name should be alphanumeric (`[A-Za-z0-9_]`). Placeholders could be
|
|
|
108
102
|
"Here is <a><b>you order info {name}</b></a>"
|
|
109
103
|
```
|
|
110
104
|
|
|
111
|
-
Tag name should be alphanumeric (`[A-Za-z0-9_]`).
|
|
105
|
+
Tag name should be alphanumeric (`[A-Za-z0-9_]`).
|
|
112
106
|
|
|
113
|
-
Open & close tag could be mapped to an element value.
|
|
107
|
+
Open & close tag could be mapped to an element value.
|
|
114
108
|
|
|
115
109
|
```jsx
|
|
116
110
|
<Interpolate
|
|
@@ -135,7 +129,7 @@ Open & close tag could be mapped to an element value.
|
|
|
135
129
|
/>
|
|
136
130
|
```
|
|
137
131
|
|
|
138
|
-
Open & close tag could be mapped to a rendering function, which would take a single argument that contains the enclosing text.
|
|
132
|
+
Open & close tag could be mapped to a rendering function, which would take a single argument that contains the enclosing text.
|
|
139
133
|
|
|
140
134
|
```jsx
|
|
141
135
|
<Interpolate
|
|
@@ -151,8 +145,6 @@ Open & close tag could be mapped to a rendering function, which would take a sin
|
|
|
151
145
|
/>
|
|
152
146
|
```
|
|
153
147
|
|
|
154
|
-
|
|
155
|
-
|
|
156
148
|
Unclosed tag or incorrect nesting of tag would result in syntax error.
|
|
157
149
|
|
|
158
150
|
```js
|
|
@@ -163,7 +155,7 @@ Unclosed tag or incorrect nesting of tag would result in syntax error.
|
|
|
163
155
|
"Here is <a><b>your order info</a></b>"
|
|
164
156
|
```
|
|
165
157
|
|
|
166
|
-
#### Self closing tag
|
|
158
|
+
#### Self closing tag
|
|
167
159
|
|
|
168
160
|
```js
|
|
169
161
|
"Hello.<br/>Here is your order"
|
|
@@ -171,28 +163,26 @@ Unclosed tag or incorrect nesting of tag would result in syntax error.
|
|
|
171
163
|
|
|
172
164
|
Tag name should be alphanumeric (`[A-Za-z0-9_]`). Self closing tags could be mapped to any valid element value.
|
|
173
165
|
|
|
174
|
-
|
|
175
166
|
## Auto tag element creation
|
|
176
167
|
|
|
177
|
-
When tags are used the string but there are no correponding mapped value, it would by default create the corresponding HTML element by default.
|
|
168
|
+
When tags are used the string but there are no correponding mapped value, it would by default create the corresponding HTML element by default.
|
|
178
169
|
|
|
179
170
|
```jsx
|
|
180
171
|
// would render: <h1>Hellow</h1><br/>World
|
|
181
|
-
<Interpolate string="<h1>Hello</h1><br/>world"/>
|
|
172
|
+
<Interpolate string="<h1>Hello</h1><br/>world" />
|
|
182
173
|
```
|
|
183
174
|
|
|
184
|
-
|
|
185
|
-
|
|
186
175
|
## Custom syntax support
|
|
187
176
|
|
|
188
177
|
You may already be using a formatting syntax in your string that is different than the built-in syntax support from Interpolate. You can configure Interpolate so that it could recognize the formatting syntax that you use.
|
|
189
178
|
|
|
190
179
|
For instance, you may be using [i18next](https://www.i18next.com/) which has a slightly different placeholder syntax.
|
|
180
|
+
|
|
191
181
|
```
|
|
192
182
|
hello {{name}}
|
|
193
183
|
```
|
|
194
184
|
|
|
195
|
-
You can define the formatting syntax of your string via
|
|
185
|
+
You can define the formatting syntax of your string via `syntax` props.
|
|
196
186
|
|
|
197
187
|
```jsx
|
|
198
188
|
import Interpolate, { TOKEN_PLACEHOLDER } from "react-interpolate"
|
|
@@ -225,3 +215,16 @@ import { SYNTAX_I18NEXT } from "react-interpolate"
|
|
|
225
215
|
/>
|
|
226
216
|
```
|
|
227
217
|
|
|
218
|
+
# Releasing
|
|
219
|
+
|
|
220
|
+
A new version of @doist/react-interpolate is published both on npm and GitHub Package Registry whenever a new release on GitHub is created.
|
|
221
|
+
|
|
222
|
+
To update the version in both `package.json` and `package-lock.json` run:
|
|
223
|
+
|
|
224
|
+
```sh
|
|
225
|
+
npm --no-git-tag-version version <major|minor|patch>
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
Once these changes have been pushed and merged, create a release on GitHub.
|
|
229
|
+
|
|
230
|
+
A GitHub Action will automatically perform all the necessary steps and will release the version number that's specified inside the `package.json`'s `version` field so make sure that the release tag reflects the version you want to publish.
|
package/package.json
CHANGED
|
@@ -1,67 +1,66 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
"
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
}
|
|
2
|
+
"name": "@doist/react-interpolate",
|
|
3
|
+
"version": "0.3.7",
|
|
4
|
+
"description": "A string interpolation component that formats and interpolates a template string in a safe way",
|
|
5
|
+
"main": "dist/react-interpolate.cjs",
|
|
6
|
+
"module": "dist/react-interpolate.mjs",
|
|
7
|
+
"engines": {
|
|
8
|
+
"node": "16.13",
|
|
9
|
+
"npm": "8.1.0"
|
|
10
|
+
},
|
|
11
|
+
"scripts": {
|
|
12
|
+
"test": "jest",
|
|
13
|
+
"lint": "eslint ./src ./__test__",
|
|
14
|
+
"build": "del dist && rollup -c && npm run mini-cjs && npm run mini-mjs",
|
|
15
|
+
"mini-cjs": "uglifyjs dist/react-interpolate.cjs --compress --mangle --enclose --output dist/react-interpolate.min.cjs",
|
|
16
|
+
"mini-mjs": "uglifyjs dist/react-interpolate.mjs --compress --mangle --enclose --output dist/react-interpolate.min.mjs"
|
|
17
|
+
},
|
|
18
|
+
"repository": {
|
|
19
|
+
"type": "git",
|
|
20
|
+
"url": "https://github.com/Doist/react-interpolate.git"
|
|
21
|
+
},
|
|
22
|
+
"keywords": [
|
|
23
|
+
"react",
|
|
24
|
+
"interpolate",
|
|
25
|
+
"template",
|
|
26
|
+
"format",
|
|
27
|
+
"text",
|
|
28
|
+
"string"
|
|
29
|
+
],
|
|
30
|
+
"author": "Steven Kao",
|
|
31
|
+
"license": "ISC",
|
|
32
|
+
"peerDependencies": {
|
|
33
|
+
"react": "^17.0.2",
|
|
34
|
+
"react-dom": "^17.0.2"
|
|
35
|
+
},
|
|
36
|
+
"devDependencies": {
|
|
37
|
+
"@babel/cli": "^7.16.0",
|
|
38
|
+
"@babel/core": "^7.16.0",
|
|
39
|
+
"@babel/eslint-parser": "^7.16.3",
|
|
40
|
+
"@babel/plugin-transform-runtime": "^7.16.4",
|
|
41
|
+
"@babel/preset-env": "^7.16.4",
|
|
42
|
+
"@babel/preset-react": "^7.16.0",
|
|
43
|
+
"@testing-library/react": "^12.1.2",
|
|
44
|
+
"babel-jest": "^27.3.1",
|
|
45
|
+
"core-js": "^3.19.1",
|
|
46
|
+
"del-cli": "^4.0.1",
|
|
47
|
+
"eslint": "^8.2.0",
|
|
48
|
+
"eslint-config-prettier": "^8.3.0",
|
|
49
|
+
"eslint-plugin-compat": "^4.0.0",
|
|
50
|
+
"eslint-plugin-jest": "^25.2.4",
|
|
51
|
+
"eslint-plugin-prettier": "^4.0.0",
|
|
52
|
+
"eslint-plugin-react": "^7.27.0",
|
|
53
|
+
"eslint-plugin-react-hooks": "^4.3.0",
|
|
54
|
+
"gzip-cli": "^1.2.0",
|
|
55
|
+
"jest": "^27.3.1",
|
|
56
|
+
"prettier": "^2.4.1",
|
|
57
|
+
"react": "^17.0.2",
|
|
58
|
+
"react-dom": "^17.0.2",
|
|
59
|
+
"rollup": "^2.60.0",
|
|
60
|
+
"rollup-plugin-babel": "^4.4.0",
|
|
61
|
+
"uglify-es": "^3.3.9"
|
|
62
|
+
},
|
|
63
|
+
"dependencies": {
|
|
64
|
+
"@babel/runtime": "^7.16.3"
|
|
65
|
+
}
|
|
67
66
|
}
|
|
Binary file
|
|
Binary file
|