https://github.com/nylen/phs
Parameterized HTML Schemas - A toolset to validate and deserialize/serialize structured HTML.
https://github.com/nylen/phs
Last synced: 9 months ago
JSON representation
Parameterized HTML Schemas - A toolset to validate and deserialize/serialize structured HTML.
- Host: GitHub
- URL: https://github.com/nylen/phs
- Owner: nylen
- Created: 2017-05-26T00:09:40.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-27T21:53:07.000Z (about 9 years ago)
- Last Synced: 2025-08-05T15:50:22.563Z (11 months ago)
- Language: JavaScript
- Size: 14.6 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## `phs` (Parameterized HTML Schemas) [](https://travis-ci.org/nylen/phs) [](https://www.npmjs.org/package/phs)
This is a library that can be used to describe and validate chunks of HTML. It
is inspired by
[RELAX NG](http://relaxng.org/),
but with a few very different goals. `phs` schemas are designed to:
- Accept placeholders for parameters, so that schemas can also be used to
serialize and deserialize chunks of data to/from HTML.
_Not implemented yet._
- Be more concise and easier to author/read/understand than the full RELAX NG
specification.
- Resemble the HTML they describe and be easily expressible in JSX notation.
**Note:** Currently this library contains the *bare minimum to be at all useful*.
## How to use
Currently it's recommended to use JSX with the
[`transform-jsx-flexible` Babel plugin](https://github.com/nylen/babel-plugin-transform-jsx-flexible).
If you're using React, for example, this allows you to continue using React
elements along with `phs` schemas within the same file.
Configure the plugin as follows in your `.babelrc`:
```js
"plugins": [
...
[ "./lib/babel-plugin-transform-jsx-flexible", {
tags: {
Schema: 'createSchemaElement',
}
} ],
...
]
```
In your JSX code files:
```js
import { createSchemaElement, Schema, Element } from 'phs';
const schema = (
);
const fragment = /* DOM fragment or similar object returned by a parser */;
const result = schema.validateFragment( fragment );
console.log( result ); // either `true` or an `Error`
```
There are also a couple of validation functions other than `validateFragment`:
- `validateNodes( arrayOfNodes )`
- `validateNode( singleNode )`
## Schema elements
### ``
Matches a single HTML element with the tag name `tagName`. `tagName` can also
be a string like `'p|span'` to provide a choice between multiple tag names.
There is also a shorthand for `` that is designed to more closely
resemble the HTML it describes. These two constructions are equivalent:
```js
const schema1 = (
;
);
const schema2 = (
);
```