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
This preprocessor can be used to transform files using the content-tag
spec to standard JS. It is built on top of swc using Rust and is deployed as a wasm package.
Installation
npm install content-tag
Usage
Node (CommonJS)
let { Preprocessor } = require('content-tag');
let p = new Preprocessor();
let output = p.process('<template>Hi</template>');
console.log(output);
Node (ESM)
import { Preprocessor } from 'content-tag';
let p = new Preprocessor();
let output = p.process('<template>Hi</template>');
console.log(output);
Browser (ESM)
import { Preprocessor } from 'content-tag';
let p = new Preprocessor();
let output = p.process('<template>Hi</template>');
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.
import { Preprocessor } from 'content-tag';
let p = new Preprocessor();
let output = p.process('<template>Hi</template>');
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.
import { Preprocessor } from 'content-tag';
let p = new Preprocessor();
let output = p.parse('<template>Hi</template>');
PreprocessorOptions
interface PreprocessorOptions {
inline_source_map?: boolean;
filename?: string;
}
Parsed
NOTE: All ranges are in bytes, not characters.
interface Parsed {
type: "expression" | "class-member";
tagName: "template";
contents: string;
range: {
start: number;
end: number;
};
contentRange: {
start: number;
end: number;
};
startRange: {
end: number;
start: number;
};
endRange: {
start: number;
end: number;
};
}
Contributing
See the CONTRIBUTING.md file.