# phy-compiled

> All-in-JS templating engine for you to write everything in JavaScript. No more HTML. No more CSS. Only JS!

Latest version **0.0.1** (published 2022-11-11) · BSD-3-Clause license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install phy-compiled
pnpm add phy-compiled
yarn add phy-compiled
bun add phy-compiled
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2022-11-11 |
| First published | 2022-11-11 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=8.3 |
| Dependencies | 2 |
| Unpacked size | 17.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | David Bushong |
| Maintainers | chen.so |

## Links

- npm: https://www.npmjs.com/package/phy-compiled
- Repository: https://github.com/yumin-chen/phy-compiled
- Issues: https://github.com/yumin-chen/phy-compiled/issues
- npm.io page: https://npm.io/package/phy-compiled

## Dependencies (2)

- [preact](https://npm.io/package/preact.md) latest
- [@compiled/react](https://npm.io/package/@compiled/react.md) latest

## Recent versions

- 0.0.1 (latest) — 2022-11-11

## README

# `phy-compiled`

All-in-JS template engine for you to write everything in JavaScript. No more HTML. No more CSS. Only JavaScript!

phy-compiled depends on [Compiled](https://compiledcssinjs.com/) CSS-in-JS styling engine.

This project is a fork of [phy](https://github.com/groupon/phy) minimal hyperscript helpers. It allows you to use minimalist `h` helper function to create React/Preact elements. With phy-compiled, the `css` prop gets parsed by Emotion, so you can write everything in JS!

## Examples

To style an element, simply pass `css` prop:

```javascript
const h = require('phy-compiled');

module.exports = function SomeComponent() {
  return h('#foo', h('span.bar', { css: { color: 'red' } }, 'whee!'));
};
```

You can create an entire styled, dark-mode aware component with merely JavaScript:

```javascript
// button.js

import { h } from 'phy-compiled';

export const Button = ({
  variant = 'primary',
  size = 'normal',
  height = size === 'small' ? 24 : 32,
  css,
  ...props
}) =>
  h('button', {
    ...props,
    css: {
      all: 'unset',
      fontFamily: 'inherit',
      fontSize: 16,
      height,
      fontWeight: 'bold',
      borderRadius: 4,
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      cursor: 'default', // Or 'pointer'
      userSelect: 'none',
      ...{
        wide: { padding: '0 48px' },
        normal: { padding: '0 32px' },
        narrow: { padding: '0 16px' },
        small: {
          padding: '0 16px',
          fontSize: 14,
        },
      }[size],
      ...{
        primary: {
          color: 'white',
          backgroundColor: 'hsl(212, 100%, 47.6%)',
          border: '1px solid rgb(174, 174, 178)',
          '&:hover': { backgroundColor: 'hsl(212, 100%, 60%)' },
          '&:focus': {
            boxShadow: '0 0 0 2px hsla(212, 100%, 60%, 0.5)',
          },
          '@media (prefers-color-scheme: dark)': {
            color: 'white',
            backgroundColor: 'hsl(212, 100%, 36%)',
            border: '1px solid rgb(99, 99, 102)',
            '&:hover': { backgroundColor: 'hsl(212, 100%, 36%)' },
            '&:focus': {
              boxShadow: '0 0 0 2px hsla(212, 100%, 64%, 0.8)',
            },
          },
        },
        green: {
          color: 'hsl(129, 67.3%, 20.0%)',
          backgroundColor: 'hsl(129, 67.3%, 72.0%)',
          border: '1px solid rgb(174, 174, 178)',
          '&:hover': { backgroundColor: 'hsl(129, 67.3%, 64.0%)' },
          '&:focus': {
            boxShadow: '0 0 0 2px rgb(174, 174, 178)',
          },
          '@media (prefers-color-scheme: dark)': {
            color: 'hsl(129, 67.3%, 88.0%)',
            backgroundColor: 'hsl(129, 67.3%, 28.0%)',
            border: '1px solid rgb(99, 99, 102)',
            '&:hover': { backgroundColor: 'hsl(129, 67.3%, 36.0%)' },
            '&:focus': {
              boxShadow: '0 0 0 2px hsl(129, 67.3%, 28.0%)',
            },
          },
        },
      }[variant],
      ...css,
    },
  });
```

```javascript
import { h } from 'phy-compiled';
import Button from './button';

export default function App() {
  return [
    h(Button, 'Primary'),
    h('br'),
    h(Button, { variant: 'green', size: 'wide' }, 'Green'),
    h('br'),
    h(Button, { size: 'small' }, 'Small'),
  ];
}
```

See CodeSandbox button example: https://codesandbox.io/s/cocky-waterfall-vy8d6q?file=/src/App.js

## Starters

To quickly get started with phy-compiled, feel free to clone the starters:

- [`phy-compiled-next-starter`](https://github.com/yumin-chen/phy-compiled-next-starter): Starter for [Next.js](https://nextjs.org)
- [`phy-compiled-gatsby-starter`](https://github.com/yumin-chen/phy-compiled-gatsby-starter): Starter for [Gatsby](https://gatsbyjs.com)

## License

`phy-compiled` is a fork of `phy` which is under [BSD-3-Clause](https://github.com/groupon/phy/blob/main/LICENSE) license.

---
_Source: https://npm.io/package/phy-compiled · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._