Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/embroider-build/content-tag

A rust program that uses a fork of SWC to parse and transform Javascript containing the content-tag proposal
https://github.com/embroider-build/content-tag

emberjs hacktoberfest wasm

Last synced: 3 days ago
JSON representation

A rust program that uses a fork of SWC to parse and transform Javascript containing the content-tag proposal

Awesome Lists containing this project

README

        

# content-tag

`content-tag` is a preprocessor for JS files that are using the content-tag proposal. This originated with Ember.js' GJS and GTS functionality. You can read more by [checking out the original RFC](https://rfcs.emberjs.com/id/0931-template-compiler-api/)

This preprocessor can be used to transform files using the `content-tag` spec to standard JS. It is built on top of [swc](https://swc.rs/) using Rust and is deployed as a wasm package.

## Installation

```sh
npm install content-tag
```

## Usage

### Node (CommonJS)

```js
let { Preprocessor } = require('content-tag');
let p = new Preprocessor();
let output = p.process('Hi');

console.log(output);
```

### Node (ESM)

```js
import { Preprocessor } from 'content-tag';
let p = new Preprocessor();
let output = p.process('Hi');

console.log(output);
```

### Browser (ESM)

```js
import { Preprocessor } from 'content-tag';
let p = new Preprocessor();
let output = p.process('Hi');

console.log(output);
```

## API

### `Preprocessor`

All `content-tag` public API lives on the `Preprocessor` object.

### `Preprocessor.process(src: string, options?: PreprocessorOptions): string;`

Parses a given source code string using the `content-tag` spec into standard
JavaScript.

```ts
import { Preprocessor } from 'content-tag';
let p = new Preprocessor();
let output = p.process('Hi');
```

### `Preprocessor.parse(src: string, options?: PreprocessorOptions): Parsed[];`

Parses a given source code string using the `content-tag` spec into an array of
`Parsed` content tag objects.

```ts
import { Preprocessor } from 'content-tag';
let p = new Preprocessor();
let output = p.parse('Hi');
```

#### `PreprocessorOptions`

````ts
interface PreprocessorOptions {

/** Default is `false` */
inline_source_map?: boolean;

filename?: string;

}
````

#### `Parsed`

NOTE: All ranges are in bytes, not characters.

````ts
interface Parsed {
/**
* The type for the content tag.
*
* 'expression' corresponds to a tag in an expression position, e.g.
* ```
* const HiComponent = Hi;
* ```
*
* 'class-member' corresponds to a tag in a class-member position, e.g.
* ```
* export default class HiComponent extends Component {
* Hi
* }
* ```
*/
type: "expression" | "class-member";

/**
* Currently, only template tags are parsed.
*/
tagName: "template";

/** Raw template contents. */
contents: string;

/**
* Byte range of the contents, inclusive of inclusive of the
* `` tags.
*/
range: {
start: number;
end: number;
};

/**
* Byte range of the template contents, not inclusive of the
* `` tags.
*/
contentRange: {
start: number;
end: number;
};

/** Byte range of the opening `` tag. */
startRange: {
end: number;
start: number;
};

/** Byte range of the closing `` tag. */
endRange: {
start: number;
end: number;
};
}
````

## Contributing

See the [CONTRIBUTING.md](./CONTRIBUTING.md) file.