Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 0 additions & 42 deletions .eslintrc

This file was deleted.

52 changes: 26 additions & 26 deletions .github/workflows/check-pull-request-health.yml
Original file line number Diff line number Diff line change
@@ -1,36 +1,36 @@
name: Check Pull Request Health

on:
pull_request:
types:
- opened
- synchronize
pull_request:
types:
- opened
- synchronize

jobs:
build:
runs-on: ubuntu-latest
timeout-minutes: 60
steps:
- name: Checkout repository
uses: actions/checkout@v4
build:
runs-on: ubuntu-latest
timeout-minutes: 60
steps:
- name: Checkout repository
uses: actions/checkout@v4

- name: Setup Node.js from .node-version
uses: actions/setup-node@v3
with:
node-version-file: .node-version
- name: Setup Node.js from .node-version
uses: actions/setup-node@v3
with:
node-version-file: .node-version

- name: Install dependencies
run: npm ci --legacy-peer-deps
- name: Install dependencies
run: npm ci --legacy-peer-deps

- name: Lint the codebase
run: npm run lint
env:
CI: true
- name: Check the codebase
run: npm run check
env:
CI: true

- name: Test the codebase
run: npm run test
env:
CI: true
- name: Test the codebase
run: npm run test
env:
CI: true

- name: Build the codebase
run: npm run build
- name: Build the codebase
run: npm run build
106 changes: 53 additions & 53 deletions .github/workflows/publish.yml
Original file line number Diff line number Diff line change
@@ -1,60 +1,60 @@
name: Release @doist/react-interpolate package

on:
release:
types: [created]
workflow_dispatch:
release:
types: [created]
workflow_dispatch:

permissions:
# Enable the use of OIDC for trusted publishing and npm provenance
id-token: write
# Enable the use of GitHub Packages registry
packages: write
# Enable the use of OIDC for trusted publishing and npm provenance
id-token: write
# Enable the use of GitHub Packages registry
packages: write

jobs:
publish:
runs-on: ubuntu-latest
timeout-minutes: 60
steps:
- name: Checkout repository
uses: actions/checkout@v4

- name: Setup Node.js from .node-version
uses: actions/setup-node@v3
with:
node-version-file: .node-version

- name: Ensure npm 11.5.1 or later is installed
run: npm install -g npm@latest

- name: Install dependencies
run: npm ci --legacy-peer-deps

- name: Lint the codebase
run: npm run lint
env:
CI: true

- name: Build the codebase
run: npm run build

- name: Publish to GitHub Package Registry
uses: actions/setup-node@v3
with:
node-version-file: .node-version
registry-url: https://npm.pkg.github.com/
scope: '@doist'
- run: npm publish
env:
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

- name: Clear npm config between GitHub/npm registries
run: rm -f $NPM_CONFIG_USERCONFIG

- name: Publish to npm registry
uses: actions/setup-node@v3
with:
node-version-file: .node-version
registry-url: https://registry.npmjs.org/
scope: '@doist'
- run: npm publish --provenance --access public
publish:
runs-on: ubuntu-latest
timeout-minutes: 60
steps:
- name: Checkout repository
uses: actions/checkout@v4

- name: Setup Node.js from .node-version
uses: actions/setup-node@v3
with:
node-version-file: .node-version

- name: Ensure npm 11.5.1 or later is installed
run: npm install -g npm@latest

- name: Install dependencies
run: npm ci --legacy-peer-deps

- name: Check the codebase
run: npm run check
env:
CI: true

- name: Build the codebase
run: npm run build

- name: Publish to GitHub Package Registry
uses: actions/setup-node@v3
with:
node-version-file: .node-version
registry-url: https://npm.pkg.github.com/
scope: "@doist"
- run: npm publish
env:
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

- name: Clear npm config between GitHub/npm registries
run: rm -f $NPM_CONFIG_USERCONFIG

- name: Publish to npm registry
uses: actions/setup-node@v3
with:
node-version-file: .node-version
registry-url: https://registry.npmjs.org/
scope: "@doist"
- run: npm publish --provenance --access public
26 changes: 26 additions & 0 deletions .oxlintrc.jsonc
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{
"$schema": "./node_modules/oxlint/configuration_schema.json",
"ignorePatterns": ["dist/*", "**/node_modules/*"],
"plugins": ["import", "jest", "react", "typescript"],
"rules": {
"react/react-in-jsx-scope": "off",
},
"overrides": [
{
// These suites use assertion helpers and no-throw checks, which trip Jest's static
// expect detection without indicating a real test quality problem here.
"files": ["__test__/**/*.{ts,tsx}"],
"rules": {
"jest/expect-expect": "off",
},
},
{
// The parser fixture strings make dynamic test titles more readable than duplicated
// literal prefixes.
"files": ["__test__/parser.test.ts"],
"rules": {
"jest/valid-title": "off",
},
},
],
}
4 changes: 2 additions & 2 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@

One core goal this library is to deliver a lightweight solution. Therefore, it comes to critically when it comes to user of dependencies and also polyfill usage.

- `react` should be its only dependencies.
- No polyfill.
- `react` should be its only dependencies.
- No polyfill.
76 changes: 38 additions & 38 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,18 @@
A string interpolation component that formats and interpolates a template string in a safe way.

```jsx
import Interpolate from '@doist/react-interpolate'
import Interpolate from "@doist/react-interpolate";

function Greeting() {
return (
<Interpolate
string="<h1>Hello {name}. Here is <a>your order info</a></h1>"
mapping={{
name: 'William',
a: <a href="https://orderinfo.com" />,
}}
/>
)
return (
<Interpolate
string="<h1>Hello {name}. Here is <a>your order info</a></h1>"
mapping={{
name: "William",
a: <a href="https://orderinfo.com" />,
}}
/>
);
}
```

Expand All @@ -40,24 +40,24 @@ Please see the [Interpolation syntax](./#interpolation-syntax) section below for

An object that defines the values to be injected for placeholder and tags defined in the template string. Optional.

- For placeholder or self-closing tag, the mapping value could be any valid element value
- For open & close tag, the mapping value could be either renderer function or an element.
- For placeholder or self-closing tag, the mapping value could be any valid element value
- For open & close tag, the mapping value could be either renderer function or an element.

```jsx
<Interpolate
string="Hello {name}. Here is <orderLink>your order info</orderLink><hr/>. \
string="Hello {name}. Here is <orderLink>your order info</orderLink><hr/>. \
Please contact <supportLink>support</supportLink> for help"
mapping={{
// you can map placholder and self-closing tag to any valid element value
name: 'William',
hr: <hr className="break" />,
mapping={{
// you can map placholder and self-closing tag to any valid element value
name: "William",
hr: <hr className="break" />,

// you can map open & close tag to a rendering function
orderLink: (text) => <a href="https://orderinfo.com">{text}</a>,
// you can map open & close tag to a rendering function
orderLink: (text) => <a href="https://orderinfo.com">{text}</a>,

// or you can map open & close tag to an element
supportLink: <a href="https://orderinfo.com" />,
}}
// or you can map open & close tag to an element
supportLink: <a href="https://orderinfo.com" />,
}}
/>
```

Expand All @@ -83,21 +83,21 @@ Here is interpolation syntax you can use in your `string`.
#### Placeholder

```jsx
'hello {user_name}'
"hello {user_name}";
```

Placeholder name should be alphanumeric (`[A-Za-z0-9_]`). Placeholders could be mapped to any valid element value.

#### Open & close tags

```jsx
'Here is <a>your order info</a>'
"Here is <a>your order info</a>";

// tag name could be any alphanumeric string
'Here is <link>your order info</link>'
"Here is <link>your order info</link>";

// you can nest tag and placeholder
'Here is <a><b>you order info {name}</b></a>'
"Here is <a><b>you order info {name}</b></a>";
```

Tag name should be alphanumeric (`[A-Za-z0-9_]`).
Expand Down Expand Up @@ -131,32 +131,32 @@ Open & close tag could be mapped to a rendering function, which would take a sin

```jsx
<Interpolate
string="Here is <a>your order info</a>"
mapping={{
a: (text) => (
<a href="https://orderinfo.com">
<b>{text}</b>
<br />
</a>
),
}}
string="Here is <a>your order info</a>"
mapping={{
a: (text) => (
<a href="https://orderinfo.com">
<b>{text}</b>
<br />
</a>
),
}}
/>
```

Unclosed tag or incorrect nesting of tag would result in syntax error.

```js
// bad: no close tag
'Here is <a>your order info'
"Here is <a>your order info";

// bad: incorrect tag structure
'Here is <a><b>your order info</a></b>'
"Here is <a><b>your order info</a></b>";
```

#### Self closing tag

```js
'Hello.<br/>Here is your order'
"Hello.<br/>Here is your order";
```

Tag name should be alphanumeric (`[A-Za-z0-9_]`). Self closing tags could be mapped to any valid element value.
Expand Down
Loading
Loading