Example
+query Hero($episode: Episode, $withFriends: Boolean!) {
+ hero(episode: $episode) {
+ name
+ friends @include(if: $withFriends) {
+ name
+ }
+ }
+}
+query Hero($episode: Episode, $withFriends: Boolean!) {
+ hero(episode: $episode) {
+ name
+ friends @include(if: $withFriends) {
+ name
+ }
+ }
+}
+Greetings, traveler! Sign up today!
Greetings, traveler! Sign up today!
+foo(
+ reallyLongArg(),
+ omgSoManyParameters(),
+ IShouldRefactorThis(),
+ isThereSeriouslyAnotherOne()
+)
+@observer
+class OrderLine {
+ @observable price: number = 0
+}
+<span
+ ><div>foo</div>
+ <span>bar</span></span
+>
+<div pretend break>content</div>
+const x number = 1 // missing :
+const user: { [key: string]: string
+| number | boolean } = {
+ name: "John Doe", age: 30 };
+foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());
+This is some code:
+<div class="nav">
+ <div class="nav-item">
+ <a href="/features" data-rr-ui-event-key="/features" class="nav-link"
+ >Features</a
+ >
+ </div>
+ <div class="nav-item">
+ <a href="pricing" data-rr-ui-event-key="pricing" class="nav-link"
+ >Pricing</a
+ >
+ </div>
+ <div class="nav-item">
+ <a href="about" data-rr-ui-event-key="about" class="nav-link">About</a>
+ </div>
+</div>
+This is some code:
+ +``` + +## Related + +- [marked-code-format](https://github.com/bent10/marked-extensions/tree/main/packages/code-format) +- [marked-code-preview](https://github.com/bent10/marked-extensions/tree/main/packages/code-preview) + +## Contributing + +We đ issues. + +When committing, please conform to [the semantic-release commit standards](https://www.conventionalcommits.org/). Please install `commitizen` and the adapter globally, if you have not already. + +```bash +npm i -g commitizen cz-conventional-changelog +``` + +Now you can use `git cz` or just `cz` instead of `git commit` when committing. You can also use `git-cz`, which is an alias for `cz`. + +```bash +git add . && git cz +``` + +## License + + + +A project by [Stilearning](https://stilearning.com) © 2023. diff --git a/packages/code-jsx-renderer/src/constants.ts b/packages/code-jsx-renderer/src/constants.ts new file mode 100644 index 0000000..2cbdf23 --- /dev/null +++ b/packages/code-jsx-renderer/src/constants.ts @@ -0,0 +1,2 @@ +export const ATTR_PATTERN = + /[ \t]*renderable(?:=(['"])?.*?\1)?$|renderable(?:=(['"])?.*?\1)?[ \t]*/g diff --git a/packages/code-jsx-renderer/src/index.ts b/packages/code-jsx-renderer/src/index.ts new file mode 100644 index 0000000..8febc85 --- /dev/null +++ b/packages/code-jsx-renderer/src/index.ts @@ -0,0 +1,113 @@ +import { parseAttrs } from 'attributes-parser' +import type { MarkedExtension } from 'marked' +import { transform } from './transform.js' +import { isPlainObject } from './utils.js' +import type { Options } from './types.js' + +export type { Options } + +/** + * A [marked](https://marked.js.org/) extension to render JSX code blocks using a custom renderer and components. + * + * @param options - The configuration options for the extension. + */ +export default function markedCodeJsxRenderer( + options: Options = {} +): MarkedExtension { + const { unwrap } = options + const allowedLangs = ['react', 'javascriptreact', 'jsx'] + + return { + extensions: [ + { + name: 'code', + level: 'block', + tokenizer(_, parent) { + parent.forEach((token, index) => { + if (token.type !== 'code' || !token.lang || !token.text) return + + // support for inline options, only for the `unwrap` option. + // ```jsx renderable="{ unwrap: true }" + // ``` + const { renderable } = parseAttrs(token.lang) + const isRenderable = + renderable && + allowedLangs.indexOf(token.lang.split(' ')[0]) !== -1 + + if (!isRenderable) return + + const inlineOptions = isPlainObject(renderable) + ? (renderable as Options) + : {} + + transform(token, { + index, + parent, + ...options, + unwrap: inlineOptions.unwrap || unwrap + }) + }) + + return undefined + } + } + ] + // walkTokens(token) { + // if (token.type !== 'code' || !token.lang || !jsx || !renderer) return + + // // support for inline options, only for the `unwrap` option. + // // ```jsx renderable="{ unwrap: true }" + // // ``` + // const { renderable } = parseAttrs(String(token.lang)) + // const code = token.text + // const lang = token.lang.split(' ')[0] + // const isRenderable = + // token.lang && !!renderable && allowedLangs.indexOf(lang) !== -1 + + // if (!code || code === null || !isRenderable) return + + // try { + // const safeValue = sanitizer ? sanitizer(code) : code + + // const result = transformSync(safeValue, { + // plugins: [removeImport], + // presets: [ + // [ + // '@babel/preset-react', + // { runtime: 'automatic', development: false } + // ] + // ] + // }) + + // // Create a dynamic function using new Function to render the code value's JSX. + // const Component = new Function( + // 'Fragment', + // '_jsx', + // '_jsxs', + // ...Object.keys(components), + // `return ${result?.code}` + // ) + + // const renderedValue = renderer( + // Component(Fragment, jsx, jsxs, ...Object.values(components)) + // ) + + // const inlineOptions = isPlainObject(renderable) + // ? (renderable as Options) + // : {} + + // if (inlineOptions.unwrap || unwrap) { + // // + // } else { + // Object.assign(token, { + // lang: token.lang.split(' ').splice(0, 1, 'html').join(' '), + // raw: token.raw.replace(`\`\`\`${lang}`, '```html'), + // text: renderedValue + // }) + // } + // } catch { + // // preserve the original code block + // } + // } + } +} diff --git a/packages/code-jsx-renderer/src/transform.ts b/packages/code-jsx-renderer/src/transform.ts new file mode 100644 index 0000000..04fc3aa --- /dev/null +++ b/packages/code-jsx-renderer/src/transform.ts @@ -0,0 +1,77 @@ +import { transformSync } from '@babel/core' +import type { Tokens } from 'marked' +import { ATTR_PATTERN } from './constants.js' +import { removeImport } from './utils.js' +import type { TransformOptions } from './types.js' + +/** + * Transform markdown code blocks using jsx renderer. + * + * @param token - The Markdown code token to transform. + * @param options - Configuration options for the transformation. + */ +export function transform(token: Tokens.Generic, options: TransformOptions) { + const { + index, + parent, + components = {}, + Fragment, + jsx, + jsxs, + renderer, + sanitizer, + unwrap + } = options + + if (!jsx || !renderer) return + + const newToken: Tokens.Generic = { type: 'code', raw: '' } + const code = token.text + + try { + const safeValue = sanitizer ? sanitizer(code) : code + const result = transformSync(safeValue, { + plugins: [removeImport], + presets: [ + ['@babel/preset-react', { runtime: 'automatic', development: false }] + ] + }) + + // Create a dynamic function using new Function to render the code value's JSX. + const Component = new Function( + 'Fragment', + '_jsx', + '_jsxs', + ...Object.keys(components), + `return ${result?.code}` + ) + + const renderedValue = renderer( + Component(Fragment, jsx, jsxs, ...Object.values(components)) + ) + + if (unwrap) { + Object.assign(newToken, { + type: 'html', + block: true, + raw: renderedValue, + pre: false, + text: renderedValue + }) + } else { + const langChunk = token.lang.replace(ATTR_PATTERN, '').split(' ') + langChunk.splice(0, 1, 'html') + const lang = langChunk.join(' ') + + Object.assign(newToken, { + lang, + raw: '```' + lang + '\n' + renderedValue + '\n```', + text: renderedValue + }) + } + + parent.splice(index, 1, newToken) + } catch { + // preserve the original code block + } +} diff --git a/packages/code-jsx-renderer/src/types.ts b/packages/code-jsx-renderer/src/types.ts new file mode 100644 index 0000000..708cb2a --- /dev/null +++ b/packages/code-jsx-renderer/src/types.ts @@ -0,0 +1,56 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ + +import { Token, TokensList } from 'marked' + +/** + * Options for configuring the `remarkCodeJsxRenderer` plugin. + */ +export interface Options { + /** + * Components to be used for rendering JSX code. + */ + components?: { [key: string]: React.ComponentType } + + /** + * Symbol to use for fragments. + */ + Fragment?: any + + /** + * Function to generate an element with static children in production mode. + */ + jsx?: any + + /** + * Function to generate an element with dynamic children in production mode. + */ + jsxs?: any + + /** + * A custom renderer function to render JSX code. + * + * @param args - Additional arguments to pass to the renderer function. + */ + renderer?: (...args: any[]) => string + + /** + * A sanitizer function to sanitize the code before rendering. + * + * @param code - The code to sanitize. + */ + sanitizer?: (code: string) => string + + /** + * If `true`, the plugin will not wrap the rendered code in a `codefence` + * element. + */ + unwrap?: boolean +} + +/** + * Configuration options for the transformation. + */ +export interface TransformOptions extends Options { + index: number + parent: Token[] | TokensList +} diff --git a/packages/code-jsx-renderer/src/utils.ts b/packages/code-jsx-renderer/src/utils.ts new file mode 100644 index 0000000..9c11f16 --- /dev/null +++ b/packages/code-jsx-renderer/src/utils.ts @@ -0,0 +1,24 @@ +import type { PluginObj } from '@babel/core' + +/** + * Create a Babel plugin to remove all import declarations from code. + */ +export const removeImport: PluginObj = { + name: 'babel-plugin-remove-import', + visitor: { + ImportDeclaration(path) { + path.remove() + } + } +} + +/** + * Checks if an object is a plain JavaScript object. + * + * @param obj - The object to check. + * @returns `true` if the object is a plain JavaScript object, `false` + * otherwise. + */ +export function isPlainObject(obj: unknown): obj is Record<div>Hello, World!</div>
+