# @frontj/elements
> Elements for frontJ.
Latest version **0.2.1** (published 2020-03-26) · MIT license · 0 weekly downloads
## Install
```sh
npm install @frontj/elements
pnpm add @frontj/elements
yarn add @frontj/elements
bun add @frontj/elements
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.2.1 |
| Published | 2020-03-26 |
| First published | 2019-11-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 407.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | siromath |
| Maintainers | siromath |
| Keywords | frontj, javascript, typescript |
## Links
- npm: https://www.npmjs.com/package/@frontj/elements
- Repository: https://github.com/frontJ/elements
- Homepage: https://github.com/frontJ/elements#readme
- Issues: https://github.com/frontJ/elements/issues
- npm.io page: https://npm.io/package/@frontj/elements
## Dependencies (1)
- [frontj](https://npm.io/package/frontj.md) ^0.4.0
## Alternatives
- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads
## Recent versions
- 0.2.1 (latest) — 2020-03-26
- 0.2.0 — 2020-02-28
- 0.1.5 — 2020-02-21
- 0.1.4 — 2020-02-17
- 0.1.3 — 2020-01-30
- 0.1.2 — 2019-12-04
- 0.1.1 — 2019-11-12
- 0.1.0 — 2019-11-03
## README
# @frontj/elements
[frontJ](https://github.com/frontJ/frontJ)の`createElement`関数を様々なHTML要素に適用したものをエクスポートしたパッケージです。
いくつかの組み込みコンポーネントも含まれています。
## Install
```bash
npm install -D @frontj/elements
```
## Example
```javascript
import {
html,
head,
title,
body,
h1,
p,
br,
input,
Meta,
Favicon,
LoadCss
} from '@frontj/elements'
import { build } from '@frontj/builder'
const text = (...contents) => p`.text`(
...contents
)
const contents = html(
head(
title('frontJ example.'),
Meta({ description: 'Description' }),
Favicon({ href: '/favicon.ico' }),
LoadCss('style.css')
),
body(
h1`.heading`('Hello!'),
text('foo', br(), 'bar'),
input`[type="checkbox"][checked]`()
)
)
build({
routes: {
'/': contents
}
})
```
HTML(整形後):
```html
frontJ example.
Hello!
foo
bar
```
## Documentation
### Components
#### `AppleTouchIcon`
apple-touch-iconの設定がされた`link`タグを返します。
```typescript
AppleTouchIcon(params: Params): string
```
| 引数 | 説明 |
| --- | --- |
| params | 返す`link`タグの内容となるオブジェクト。設定項目は下記に記載しています。 |
`params`の設定項目:
| 項目 | 説明 |
| --- | --- |
| sizes | 省略可能で、`sizes`属性の値を文字列で設定します。 |
| href | `href`属性の値を文字列で設定します。 |
```typescript
AppleTouchIcon({ sizes: '180x180', href: '/apple-touch-icon.png' })
/*
*/
AppleTouchIcon({ href: '/apple-touch-icon.png' })
/*
*/
```
#### `Favicon`
faviconの設定がされた`link`タグを返します。
```typescript
Favicon(params: Params): string
```
| 引数 | 説明 |
| --- | --- |
| params | 返す`link`タグの内容となるオブジェクト。設定項目は下記に記載しています。 |
`params`の設定項目:
| 項目 | 説明 |
| --- | --- |
| type | 省略可能で、`type`属性の値を文字列で設定します。 |
| href | `href`属性の値を文字列で設定します。 |
```typescript
Favicon({ type: 'image/png', href: '/favicon.png' })
/*
*/
Favicon({ href: '/favicon.ico' })
/*
*/
```
#### `LoadCss`
`` `` ``の結果を返します。
```typescript
LoadCss(path: string): string
```
| 引数 | 説明 |
| --- | --- |
| path | CSSファイルへのパス。 |
#### `LoadJs`
`` `` ``の結果を返します。
```typescript
LoadJs(path: string): string
```
| 引数 | 説明 |
| --- | --- |
| path | JavaScriptファイルへのパス。 |
#### `Meta`
様々な`meta`タグを返します。
```typescript
Meta(params: Params, options?: Options): string
```
| 引数 | 説明 |
| --- | --- |
| params | 返す`meta`タグの内容となるオブジェクト。設定項目は下記に記載しています。 |
| options | 各種オプション設定用オブジェクト。設定項目は下記に記載しています。 |
`params`の設定項目:
| 項目 | 説明 |
| --- | --- |
| charset | `charset`の内容を文字列で設定します。 |
| title | `og:title`や(`options.includeTitleElement`が`true`のとき)`tiltle`の内容を文字列で設定します。 |
| description | `description`や`og:description`の内容を文字列で設定します。 |
| viewport | `viewport`の内容を文字列で設定します。 |
| refresh | `refresh`の内容を文字列で設定します。 |
| ogTitle | `og:title`の内容を文字列で設定します。`title`プロパティの値よりも優先され、`options.autoOg`の値に関わらず`meta`タグを返します。 |
| ogDescription | `og:description`の内容を文字列で設定します。`description`プロパティの値よりも優先され、`options.autoOg`の値に関わらず`meta`タグを返します。 |
| ogUrl | `og:url`の内容を文字列で設定します。 |
| ogImage | `og:image`の内容を文字列で設定します。 |
| ogSiteName | `og:site_name`の内容を文字列で設定します。 |
| ogType | `og:type`の内容を`'website'`, `'article'`のいずれかで設定します。 |
| twitterCard | `twitter:card`の内容を`'summary'`, `'summary_large_image'`, `'app'`, `'player'`のいずれかで設定します。 |
| twitterSite | `twitter:site`の内容を文字列で設定します。 |
| twitterCreator | `twitter:creator`の内容を文字列で設定します。 |
| fbAppId | `fb:app_id`の内容を文字列で設定します。 |
`options`の設定項目:
| 項目 | 説明 |
| --- | --- |
| autoOg | 真偽値で、OGPタグを自動で返すか設定します。初期値は`true`です。 |
| includeTitleElement | 真偽値で、`params.title`の値が入力された`title`タグを返すか設定します。初期値は`false`です。 |
```typescript
Meta({ charset: 'UTF-8' })
/*
*/
Meta({ title: 'Title' }, { includeTitleElement: true })
/*
Title
*/
Meta({ description: 'Description' })
/*
*/
Meta({ description: 'Description' }, { autoOg: false })
/*
*/
Meta({ description: 'Description', ogDescription: 'OgDescription' })
/*
*/
Meta({ viewport: 'width=device-width, initial-scale=1.0' })
/*
*/
```
## License
[MIT](https://github.com/frontJ/elements/blob/master/LICENSE)
---
_Source: https://npm.io/package/@frontj/elements · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._