# @phijs/gatsby-plugin-phi

> Gatsby plugin to generate code based on .phi file format

Latest version **0.4.3** (published 2020-04-09) · GNU GPL V3.0 license · 0 weekly downloads

## Install

```sh
npm install @phijs/gatsby-plugin-phi
pnpm add @phijs/gatsby-plugin-phi
yarn add @phijs/gatsby-plugin-phi
bun add @phijs/gatsby-plugin-phi
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.3 |
| Published | 2020-04-09 |
| First published | 2020-04-09 |
| Weekly downloads | 0 |
| License | GNU GPL V3.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 17.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 79 |
| Author | Guillaume Salles |
| Maintainers | guillaumesalles |

## Links

- npm: https://www.npmjs.com/package/@phijs/gatsby-plugin-phi
- Repository: https://github.com/GuillaumeSalles/phi-vscode
- Homepage: https://github.com/GuillaumeSalles/phi-vscode#readme
- Issues: https://github.com/GuillaumeSalles/phi-vscode/issues
- npm.io page: https://npm.io/package/@phijs/gatsby-plugin-phi

## Dependencies (4)

- [typescript](https://npm.io/package/typescript.md) ^3.5.2
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.2.3
- [@phijs/shared](https://npm.io/package/@phijs/shared.md) 0.4.0
- [@types/loader-utils](https://npm.io/package/@types/loader-utils.md) ^1.1.3

## Recent versions

- 0.4.3 (latest) — 2020-04-09
- 0.4.2 — 2020-04-09

## README

# Phi for Visual Studio Code

Design components for the web in Visual Studio Code. Generate code you ~~can trust~~ (ok, maybe not yet).

## What is Phi for VS Code?

Phi is a Visual Studio Code extension that lets you design react components and then generate code you can use in your web apps (only [Gatsby](https://www.gatsbyjs.org/) and [Next.js](https://nextjs.org/) are supported right now). By limiting the scope to the web platform, Phi can leverage powerful CSS features like media queries and pseudo classes to generate a good part of your design system.

**Phi is still in alpha so you will encounters some bugs.**

## How it works

### Design your components in VS Code

![Phi Extension Demo](/assets/PhiEditor.png)

### Import component from .phi file

![Code example](/assets/CodeExample.png)

## Getting Started

### Install the Phi Extension

Download the VSCode extension https://marketplace.visualstudio.com/items?itemName=GuillaumeSalles.phi-vscode

Create a new a file with a `.phi` extension and save it.

At this point, you should be able to see the Phi Editor in VSCode
![Phi Extension preview in vscode](/assets/HelloWorld.png)

You are now ready to design your own components!

## Gatsby integration

Install `@phijs/gatsby-plugin-phi` in your Gatsby project

```shell
npm install --save-dev gatsby-plugin-phi
```

Add `@phijs/gatsby-plugin-phi` in your plugins list in your `gatsby-config.js`.

```javascript
module.exports = {
  plugins: [
    /* Other plugins */
    `@phijs/gatsby-plugin-phi`,
  ],
};
```

Import your component directly from your react code.

```jsx
import { HelloWorld } from "./path/to/file.phi";

const IndexPage = () => <HelloWorld />;
```

## Next.js integration

Install `@phijs/next-plugin` in your Next.js project

```shell
npm install --save-dev @phijs/next-plugin
```

Create a `next.config.js` at the root of your project

```javascript
const withPhi = require("@phijs/next-plugin")();
module.exports = withPhi();
```

Import your component directly from your react code.

```jsx
import { HelloWorld } from "./path/to/file.phi";

const IndexPage = () => <HelloWorld />;
```

## Conventions

Components names are defined as `kebab-case` in Phi but are imported as `PascalCase`.
Example `hello-world` becomes `HelloWorld`.

Properties are defined as `kebab-case` in Phi but are imported as `camelCase`.
Example `my-prop` become `myProp`;

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