Helper functions to transform code into @vyke/elements

Installation

npm i @vyke/transform-to-elements

or you can use the interactive website

API

markupToNodes

Converts markup into nodes, useful to manipulated the code before converting it to elements

import { markupToNodes } from '@vyke/transform-to-elements'

const nodes = markupToNodes('<div><p>test</p></div>')
//      ^? Node[]

markupToElements

Converts a given markup to elements

import { markupToElements } from '@vyke/transform-to-elements'

const elements = markupToElements('<div><p>test</p></div>')
//       ^? { code: string[], tags: string[] }
// where code is each line of the output
// and tags is the list of elements found

nodesToElements

Converts nodes to elements to generate elements using the output of markupToNodes

import { markupToNodes } from '@vyke/transform-to-elements'

const nodes = markupToNodes('<div><p>test</p></div>')
//      ^? Node[]

const elements = nodesToElements(nodes); // same output as markupToElements

Inspiration and Credits

• inspired by HTML/MD Snippet to VanJS Code
• Done using domhandler and html-dom-parser