# pu2

> Greg's utils

Latest version **0.0.83** (published 2022-02-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install pu2
pnpm add pu2
yarn add pu2
bun add pu2
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.83 |
| Published | 2022-02-24 |
| First published | 2020-02-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 83.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Gregory Dalton |
| Maintainers | gregolai |

## Links

- npm: https://www.npmjs.com/package/pu2
- Repository: https://github.com/gregolai/pu2
- Homepage: https://github.com/gregolai/pu2#readme
- Issues: https://github.com/gregolai/pu2/issues
- npm.io page: https://npm.io/package/pu2

## Dependencies (3)

- [react](https://npm.io/package/react.md) >=17.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [react-dom](https://npm.io/package/react-dom.md) >=17.0

## Recent versions

- 0.0.83 (latest) — 2022-02-24
- 0.0.82 — 2022-02-24
- 0.0.81 — 2022-02-24
- 0.0.80 — 2022-02-24
- 0.0.79 — 2022-02-18
- 0.0.78 — 2022-02-13
- 0.0.77 — 2022-02-12
- 0.0.76 — 2022-02-12
- 0.0.75 — 2022-02-12
- 0.0.74 — 2022-02-12
- 0.0.73 — 2022-02-12
- 0.0.72 — 2022-02-10
- 0.0.71 — 2022-02-10
- 0.0.70 — 2022-02-10
- 0.0.69 — 2022-02-10
- … 62 more at https://npm.io/package/pu2/versions

## README

# pu2

[![Build Status](https://travis-ci.org/gregolai/pu2.svg?branch=master)](https://travis-ci.org/gregolai/pu2)
[![NPM version](https://img.shields.io/npm/v/pu2.svg)](https://www.npmjs.com/package/pu2)
[![Standard Version](https://img.shields.io/badge/release-standard%20version-brightgreen.svg)](https://github.com/conventional-changelog/standard-version)

---

[Me](https://gregoryland.com)

## Style Lib

Everything goes through `<Box>`
```typescript
// src/client/MyButton.tsx
import React from 'react';
import { Box } from 'pu2';


// Renders a <div> element with a button role
export const MyButton = ({ children, onClick }) => (
	<Box
		role="button"
		cursor="pointer"
		display="flex"
		alignItems="center"
		justifyContent="center"
		onClick={onClick}
	>
		{children}
	</Box>
);

// Renders a <button> element with some icon
export const MyButton2 = ({ children, icon, onClick }) => (
	<Box as="button" onClick={onClick}>
		{icon}
		{children}
	</Box>
);

// Passing some css as a prop will override style props (renders a black button with white text)
const css = { color: 'white', background: 'black' };
export const MyButton4 = ({ children, onClick }) => (
	<Box color="orange" css={css} onClick={onClick}>
		{children}
	</Box>
);

// Get fancy. Generate classnames on-the-fly, including media queries and sub-selectors.
const css = {
	color: 'lightblue',
	
	// Match descendent children (notice the space before the selector)
	' span': {
		color: 'green',

		'[data-value]': { color: 'silver' }, // Match attribute

		'.x': { color: 'wheat' } // Match classname (no space before the selector)
	},
	' .b': { color: 'orange' },

	// Match immediate children
	'>span': { color: 'blue' },
	'>.b': {
		color: 'yellow',

		':hover': { color: 'cyan' } // Match element state
	},

	// Match a media query
	'@media screen and (max-width: 600px)': {
		color: 'magenta',

		'>span': { color: 'red' }
	}
}
export const MyButton5 = ({ onClick, prefix }) => (
	<Box css={css} onClick={onClick}>
		lightblue...or magenta when <=600px screen width
		<Box className="a">black</Box>
		<Box as="span">
			blue...or red when <=600px screen width
			<Box className="b">orange</Box>
		</Box>
		<Box className="b">
			yellow...or cyan when hovering
			<Box as="span">green</Box>
			<Box as="span" data-value="10">silver</Box>
			<Box as="span" className="x">wheat</Box>
		</Box>
		<Box className="b">
	</Box>
)


```

## Basic SSR

```typescript
// src/client/App.ts
import React from 'react';
import { Box } from 'pu2/style-lib';

export const App = () => (
	<Box background="blue" p="16px">
		<Box color="red" background="white" p="8px">
			Text
		</Box>
	</Box>
);
```

```typescript
// src/client/main.client.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserStyleProvider } from 'pu2/style-lib';
import { App } from './App';

ReactDOM.hydrate(
	<BrowserStyleProvider>
		<App />
	</BrowserStyleProvider>,
	document.body
)
```

```typescript
// src/server/main.server.ts
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';
import { SSRStyleProvider, SSRStyleCollector } from 'pu2/style-lib/server';
import { App } from '../client/App';

const renderSSR = ({ appHtml, styleHtml }) => `
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>My App</title>
		${styleHtml}
	</head>
	<body>
		${appHtml}
	</body>
</html>
`;

const server = express();

server.get('/', async (req, res) => {
	const collector = new SSRStyleCollector();
	const appHtml = renderToString(
		<SSRStyleProvider collector={collector}>
			<App />
		</SSRStyleProvider>
	);
	const styleHtml = collector.getHtml();

	res.status(200)
		.set({ 'Content-Type': 'text/html' })
		.end(renderSSR({ appHtml, styleHtml }));
});
server.listen(3000);
```

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