feat(rehype-html): adding rehype as a html processor (#369)

* feat(rehype-html): adding rehype as a html processor

* refactor(rehype-html): configured rehype-parser to use in gragment mode

Author: JayaKrishnaNamburu

jest.config.js

@@ -20,7 +20,7 @@ module.exports = {
   "testPathIgnorePatterns": ['mocks.ts'],
   "moduleNameMapper": {
     '^html-whitespace-sensitive-tag-names$':
-    '<rootDir>/packages/teleport-component-generator-vue/setup/html-whitespace-sensitive-tag-names.json'
+    '<rootDir>/test-mocks/html-whitespace-sensitive-tag-names.json'
   },
   "collectCoverage": false,
   "testEnvironment": "node",

packages/teleport-component-generator-vue/setup/html-whitespace-sensitive-tag-names.json

@@ -0,0 +1,14 @@
+# teleport-postprocessor-rehype-html
+
+A post-processing function that formats html code chunks using rehype and the rehype-format plugin.
+
+> This package is part of the [teleport ecosystem](https://github.com/teleporthq/teleport-code-generators). For a complete guide, check out the [official documentation](https://docs.teleporthq.io/).
+
+## Install
+```bash
+npm install @teleporthq/teleport-postprocessor-rehype-html
+```
+or
+```bash
+yarn add @teleporthq/teleport-postprocessor-rehype-html
+```

packages/teleport-postprocessor-rehype-html/README.md

@@ -0,0 +1,28 @@
+import processor from '../src'
+
+describe('rehype html', () => {
+  it('formats only the html chunk', () => {
+    const inputChunks = {
+      html: `<div><span >Format me!</span> 
+  </div>`,
+      js: `import React from "react"; import {Link} from "react-router"`,
+    }
+
+    const result = processor(inputChunks)
+
+    expect(result.html).toBe(`\n<div><span>Format me!</span></div>\n`)
+    expect(result.js).toBe(inputChunks.js)
+  })
+
+  it('skips formatting if no html chunk is found', () => {
+    const inputChunks = {
+      css: '.test { margin: 10px; }',
+      js: `import React from "react"; import {Link} from "react-router"`,
+    }
+
+    const result = processor(inputChunks)
+
+    expect(result.css).toBe(inputChunks.css)
+    expect(result.js).toBe(inputChunks.js)
+  })
+})

packages/teleport-postprocessor-rehype-html/__tests__/index.ts

@@ -0,0 +1,33 @@
+{
+  "name": "@teleporthq/teleport-postprocessor-rehype-html",
+  "version": "0.10.0-alpha.0",
+  "description": "A post-processing function that formats html code chunks using rehype and the rehype-html plugin",
+  "author": "teleportHQ",
+  "license": "MIT",
+  "homepage": "https://teleporthq.io/",
+  "main": "dist/cjs/index.js",
+  "types": "dist/cjs/index.d.ts",
+  "module": "dist/esm/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://[email protected]/teleporthq/teleport-code-generators.git"
+  },
+  "bugs": {
+    "url": "https://github.com/teleporthq/teleport-code-generators/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "npm run build:cjs & npm run build:esm",
+    "build:cjs": "tsc -p tsconfig-cjs.json",
+    "build:esm": "tsc -p tsconfig-esm.json"
+  },
+  "dependencies": {
+    "rehype": "^9.0.0",
+    "rehype-format": "^3.0.0",
+    "rehype-parse": "^6.0.1",
+    "@teleporthq/teleport-types": "^0.10.0-alpha.0"
+  }
+}

packages/teleport-postprocessor-rehype-html/package.json

@@ -0,0 +1,39 @@
+// @ts-ignore
+import rehype from 'rehype'
+// @ts-ignore
+import format from 'rehype-format'
+// @ts-ignore
+import parse from 'rehype-parse'
+
+import { PostProcessor, PrettierFormatOptions, FileType } from '@teleporthq/teleport-types'
+
+interface PostProcessorFactoryOptions {
+  fileType?: string
+  formatOptions?: PrettierFormatOptions
+}
+
+export const createPostProcessor = (options: PostProcessorFactoryOptions = {}) => {
+  const fileType = options.fileType || FileType.HTML
+
+  const processor: PostProcessor = (codeChunks) => {
+    if (codeChunks[fileType]) {
+      rehype()
+        .use(parse, { fragment: true })
+        .use(format)
+        .process(codeChunks[fileType], (err: any, file: any) => {
+          codeChunks[fileType] = String(file)
+          if (err) {
+            throw new Error(`Error occured in formatting with rehype, ${err}`)
+          }
+        })
+    } else {
+      console.warn('No code chunk of type HTML found, prettier-html did not perform any operation')
+    }
+
+    return codeChunks
+  }
+
+  return processor
+}
+
+export default createPostProcessor()

packages/teleport-postprocessor-rehype-html/src/index.ts

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/cjs",
+    "module": "commonjs",
+    "target": "es5"
+  },
+  "include": [
+    "./src"
+  ]
+}

packages/teleport-postprocessor-rehype-html/tsconfig-cjs.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/esm",
+    "module": "esnext",
+    "target": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": [
+    "./src"
+  ]
+}

packages/teleport-postprocessor-rehype-html/tsconfig-esm.json

@@ -0,0 +1,6 @@
+[
+  "script",
+  "style",
+  "pre",
+  "textarea"
+]