# frontj
> Static HTML generator.
Latest version **0.4.1** (published 2020-03-26) · MIT license · 0 weekly downloads
## Install
```sh
npm install frontj
pnpm add frontj
yarn add frontj
bun add frontj
```
## 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.4.1 |
| Published | 2020-03-26 |
| First published | 2019-11-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 270.2 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
- Repository: https://github.com/frontJ/frontJ
- Homepage: https://github.com/frontJ/frontJ#readme
- Issues: https://github.com/frontJ/frontJ/issues
- npm.io page: https://npm.io/package/frontj
## 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.4.1 (latest) — 2020-03-26
- 0.4.0 — 2020-02-28
- 0.3.0 — 2020-02-21
- 0.2.0 — 2020-01-27
- 0.1.9 — 2020-01-24
- 0.1.8 — 2019-12-23
- 0.1.6 — 2019-12-04
- 0.1.5 — 2019-11-12
- 0.1.4 — 2019-11-11
- 0.1.3 — 2019-11-06
- 0.1.2 — 2019-11-06
- 0.1.1 — 2019-11-03
- 0.1.0 — 2019-11-03
## README
# frontJ
## Install
```bash
npm install -D frontj
```
## Example
```javascript
import { writeFileSync } from 'fs'
import { createElement } from 'frontj'
import { build } from '@frontj/builder'
const html = createElement('html')
const head = createElement('head')
const title = createElement('title')
const body = createElement('body')
const h1 = createElement('h1')
const p = createElement('p')
const br = createElement('br', { children: false })
const input = createElement('input', { children: false })
const div = createElement('div')
const text = (...contents) => p`.text`(
...contents
)
const contents = html(
head(
title('frontJ example.'),
),
body(
h1`.heading`('Hello!'),
text('foo', br(), 'bar'),
input`[type="checkbox"][checked]`(),
div`#id.class1.class2`()
)
)
build({
routes: {
'/': contents
}
})
```
HTML(整形後):
```html
frontJ example.
Hello!
foo
bar
```
[`createElement`](#createelement)メソッドで各要素を生成する代わりに、[@frontj/elements](https://github.com/frontJ/elements)パッケージからimportすることを推奨します。
HTMLファイルの出力には[@frontj/builder](https://github.com/frontJ/builder)を使用することを推奨します。
## Documentation
### Methods
#### `$if`
`condition`引数の値によって`value`または`elseValue`の値を返します。
[`FrontJElement`](#frontjelement)関数内で値を出し分ける際に有用です。
```typescript
$if(condition: boolean, value: string | number, elseValue: string | number = ''): string | number
```
| 引数 | 説明 |
| --- | --- |
| condition | この値が`true`の場合は`value`の値、`false`の場合は`elseValue`の値が返されます。 |
| value | `condition`が`true`の場合に返される値。 |
| elseValue | `condition`が`false`の場合に返される値。初期値は空文字です。 |
```typescript
const hasPosts = false
div(
h2('関連記事'),
$if(hasPosts,
article(/* ... */),
p('記事が見つかりませんでした。')
)
)
/*
*/
```
#### `createElement`
[`FrontJElement`](#frontjelement)型の関数を返します。
```typescript
createElement(name: string, options: FrontJCreateElementOptions): FrontJElement
```
| 引数 | 説明 |
| --- | --- |
| name | HTML要素名。`'html'`が渡された場合、この`createElement`が返した[`FrontJElement`](#frontjelement)を実行時すると自動的に`''`が付与されます。 |
| options | 各種オプション設定用オブジェクト。設定項目は[`FrontJCreateElementOptions`](#frontjcreateelementoptions)型の項目に記載しています。 |
### Functions
#### `FrontJElement`
[`createElement`](#createelement)メソッドの返り値として存在し、HTML要素の文字列を返します。
```typescript
// `FrontJElement`の部分は実際にはタグ名などになります。
FrontJElement(...contents: (string | number)[]): string
// 要素の属性を設定する場合はテンプレート文字列を使用します。
FrontJElement`TemplateStrings`: (...contents: (string | number)[]) => string
```
| 引数 | 説明 |
| --- | --- |
| contents | 省略可能で、カンマ区切りで文字列または数値を渡せます。渡された値は結合されHTML要素内に出力されます。 |
| TemplateStrings | CSSセレクタのような文字列を渡して、要素の属性を設定することができます。`${}`には文字列または数値を入力できます。 |
```typescript
const div = createElement('div')
div('Hello', 1) // => Hello1
div`#id.class`('Hello', 1) // => Hello1
div`#id${'1'}.class${1}`('Hello', 1) // => Hello1
```
### Types
#### `FrontJCreateElementOptions`
[`createElement`](#createelement)メソッドの`options`引数の型として使用されます。
```typescript
FrontJCreateElementOptions {
children?: boolean;
}
```
| 引数 | 説明 |
| --- | --- |
| children | この要素が子要素(テキストノードも含む)を持てるかを真偽値で指定します。`false`の場合、[`FrontJElement`](#frontjelement)関数に渡した引数は無視され、閉じタグが無いHTML要素として出力されます。デフォルトは`true`です。 |
## License
[MIT](https://github.com/frontJ/frontJ/blob/master/LICENSE)
---
_Source: https://npm.io/package/frontj · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._