Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

axe-markdown-loader

Package Overview
Dependencies
Maintainers
1
Versions
25
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

axe-markdown-loader - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

2

dist/buildComponent.js

@@ -82,3 +82,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap

var ExampleRendererComponent = 'const jsxTransform = ({id , parentMarkdownId , source}) => (\n buble.transform(`\n (() => {\n\n const { React , ReactDOM } = window.AxeMarkdownModules.core;\n\n ${Object.keys(window.AxeMarkdownModules.userImports).reduce((acc, moduleName) => acc + `\\n const ${moduleName} = window.AxeMarkdownModules.userImports[\'${moduleName}\']; `,\'\')}\n const props = window.AxeMarkdownModules.props[${parentMarkdownId}];\n\n const Component = <React.Fragment>${source}</React.Fragment>\n \n const renderTarget = document.getElementById("render-result-${id}");\n ReactDOM.render(Component, renderTarget);\n\n })();\n `).code\n);\n\nconst javascriptTransform = ({parentMarkdownId , source}) => (\n buble.transform(`\n (() => {\n\n const { React , ReactDOM } = window.AxeMarkdownModules.core;\n\n ${Object.keys(window.AxeMarkdownModules.userImports).reduce((acc, moduleName) => acc + `\\n const ${moduleName} = window.AxeMarkdownModules.userImports[\'${moduleName}\']; `,\'\')}\n const props = window.AxeMarkdownModules.props[${parentMarkdownId}];\n\n ${source}\n\n })();\n `).code\n);\n\nconst transpileSource = ({languageName , source, id = null , parentMarkdownId}) => (\n\n (languageName === "jsx" && jsxTransform({id , source, parentMarkdownId}))\n\n ||\n\n (languageName === "javascript" && javascriptTransform({source, parentMarkdownId}))\n\n ||\n\n (languageName === "scss" && stylis(\'\', source))\n\n ||\n\n (languageName === "markdown" && md.render(source))\n\n ||\n\n source\n);\n\nlet exampleId = 0;\nclass ExampleRenderer extends React.Component {\n constructor(props) {\n super(props);\n this.id = exampleId++;\n\n const { parentMarkdownId , languageName , initialSource } = props;\n const processedInitialSource = props.initialSource.replace(/\\n$/,\'\');\n \n this.state = {\n source: processedInitialSource,\n transpiledSource: transpileSource({ languageName , id: this.id , parentMarkdownId , source: processedInitialSource }),\n sourceMutated: false\n }\n \n this.onChange = this.onChange.bind(this);\n this.evalJS = this.evalJS.bind(this);\n this.restoreInitialSource = this.restoreInitialSource.bind(this);\n }\n \n componentDidMount() {\n const { languageName , shouldRunJavaScript } = this.props;\n \n if ( languageName === "jsx" || languageName === "javascript" ) { this.evalJS(); }\n }\n\n onChange({ newSource }) {\n \n const { languageName , parentMarkdownId , updateLineNumbers } = this.props;\n const { transpiledSource: oldTranspiledSource } = this.state;\n\n updateLineNumbers();\n \n const transpiledSource = (() => {\n try {\n return transpileSource({languageName , id: this.id , parentMarkdownId , source: newSource});\n } catch (error) {\n console.log(\'transpilation error:\', error);\n return oldTranspiledSource;\n }\n })();\n \n this.setState({\n source: newSource,\n transpiledSource,\n sourceMutated: true\n });\n }\n\n evalJS({transpiledSource} = {}) {\n const { hideRender } = this.props;\n const { transpiledSource: transpiledSourceFromState } = this.state;\n\n if ( hideRender ) return false;\n \n try {\n eval(transpiledSource ? transpiledSource : transpiledSourceFromState);\n \n } catch (error) {\n console.log(\'runtime error:\', error);\n }\n }\n\n componentDidUpdate(prevProps) {\n const {parentMarkdownId , languageName , initialSource} = this.props;\n const {source , sourceMutated} = this.state;\n\n if (prevProps.initialSource !== initialSource) {\n this.onChange({newSource: initialSource});\n\n setTimeout(() => {\n this.setState({\n sourceMutated:false\n })\n });\n\n return false;\n }\n\n if (source === initialSource && sourceMutated) {\n setTimeout(() => {\n this.setState({\n sourceMutated:false\n })\n });\n }\n\n if ( (languageName === "jsx" || languageName === "javascript") ) {\n try {\n const transpiledSource = transpileSource({languageName , id: this.id , parentMarkdownId , source});\n this.evalJS({transpiledSource});\n\n } catch (error) {\n console.log(\'error:\', error);\n }\n }\n }\n\n restoreInitialSource() {\n const {initialSource} = this.props;\n\n this.onChange({newSource: initialSource})\n\n setTimeout(() => {\n this.setState({\n sourceMutated:false\n })\n });\n }\n\n render() {\n const { languageName , showSource , hideLineNumbers , hideRender } = this.props;\n const { source, transpiledSource, sourceMutated } = this.state;\n const { id , onChange , restoreInitialSource } = this;\n\n return (\n <div>\n {!hideRender && (\n (languageName === "jsx" && <JSXRenderResult id={id} innerRef={element => this.renderWrapper = element} />)\n\n ||\n\n (languageName === "scss" && <HtmlStyleTag content={transpiledSource} />)\n\n ||\n\n (languageName === "markdown" && <div className="axe-markdown__render-result" dangerouslySetInnerHTML={{ __html: transpiledSource }} />)\n\n ||\n\n (languageName === "html" && <div className="axe-markdown__render-result" dangerouslySetInnerHTML={{ __html: transpiledSource }} />)\n )}\n\n {showSource && (\n <div style={{position: \'relative\'}}>\n {sourceMutated && <button className="axe-markdown__restore-source" onClick={restoreInitialSource} style={{position:\'absolute\', right:3, top:4, zIndex:2}}>Restore Source</button>}\n <pre\n className={[\n "axe-markdown__render-source",\n hideLineNumbers ? null : \'axe-markdown__render-source--with-line-numbers\',\n hideLineNumbers ? null : \'axe-markdown__render-source--line-numbers-padding\',\n ].filter(className => className).join(\' \')}\n >\n <code style={{pointerEvents:\'none\' , background:\'none\'}}>\n {source}\n </code>\n </pre>\n <textarea\n className={[\n "axe-markdown__render-source",\n hideLineNumbers ? null : \'axe-markdown__render-source--line-numbers-padding\',\n ].filter(className => className).join(\' \')}\n onChange={({ target: { value } }) => onChange({ newSource: value })}\n value={source}\n disabled={hideRender}\n style={{\n color:\'transparent\',\n position:\'absolute\',\n left:0,\n top:0,\n zIndex:1,\n background:"none",\n outline:"none",\n border:"none",\n width:"100%",\n height:"100%",\n resize: \'none\',\n overflow:\'hidden\'\n }}\n autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck="false"\n onKeyDown={event => {\n \n const textareaElement = event.target;\n const keyCode = event.keyCode || event.which;\n \n if (keyCode == 9) {\n event.preventDefault();\n const start = textareaElement.selectionStart;\n const end = textareaElement.selectionEnd;\n \n textareaElement.value = textareaElement.value.substring(0,start) + " " + textareaElement.value.substring(end);\n \n onChange({ newSource: textareaElement.value });\n \n textareaElement.selectionStart = start + 4;\n textareaElement.selectionEnd = start + 4;\n }\n }}\n />\n </div>\n )}\n </div>\n )\n }\n}\n\nclass JSXRenderResult extends React.Component {\n shouldComponentUpdate() {\n return false;\n }\n \n render() {\n const {id , innerRef} = this.props;\n \n return (<div className="axe-markdown__render-result" ref={innerRef} id={"render-result-" + id} />);\n }\n}' + '\n\n';
var PropsTableComponent = 'const PropsTable = ({ component: { propTypes, defaultProps } }) => (\n\t<table className="axe-markdown-props-table">\n\t\t<thead>\n\t\t\t<tr>\n\t\t\t\t<th>Prop Name</th>\n\t\t\t\t<th className="axe-markdown-props-table__is-required">required?</th>\n\t\t\t\t<th>type</th>\n\t\t\t\t<th>Default</th>\n\t\t\t</tr>\n\t\t</thead>\n\t\t<tbody>\n\t\t\t{\n\t\t\t\treduce(propTypes, (rows, { info }, propName) => [\n\t\t\t\t\t...rows,\n\t\t\t\t\t<tr key={propName}>\n\t\t\t\t\t\t<td>\n\t\t\t\t\t\t\t{propName}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t\t<td className="axe-markdown-props-table__is-required">\n\t\t\t\t\t\t\t{info.isRequired ? \'\u2705\' : null}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t\t<td>\n\t\t\t\t\t\t\t{readerFriendlyPropType({ info })}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t\t<td className="axe-markdown-props-table__default-props">\n\t\t\t\t\t\t\t{JSON.stringify(defaultProps[propName], null, 2)}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t</tr>\n\t\t\t\t], [])\n\t\t\t}\n\t\t</tbody>\n\t</table>\n);\n\nconst readerFriendlyPropType = ({ info }) => (\n\n\tinfo.propTypeName === \'array\' && `Array`\n\n\t||\n\n\tinfo.propTypeName === \'bool\' && `Boolean`\n\n\t||\n\n\tinfo.propTypeName === \'func\' && `Function`\n\n\t||\n\n\tinfo.propTypeName === \'number\' && `Number`\n\n\t||\n\n\tinfo.propTypeName === \'object\' && `Object`\n\n\t||\n\n\tinfo.propTypeName === \'string\' && `String`\n\n\t||\n\n\tinfo.propTypeName === \'symbol\' && `Symbol`\n\n\t||\n\n\tinfo.propTypeName === \'node\' && `Number || String || React.Element || Array`\n\n\t||\n\n\tinfo.propTypeName === \'element\' && `React.Element`\n\n\t||\n\n\tinfo.propTypeName === \'instanceOf\' && `Instance of: ${info.className}`\n\n\t||\n\n\tinfo.propTypeName === \'oneOf\' && `One of: (${JSON.stringify(info.allowedValues, null, 3)})`\n\n\t||\n\n\tinfo.propTypeName === \'oneOfType\' && info.allowedPropTypes.map(({ info }) => (\n\t\treaderFriendlyPropType({ info })\n\t)).join(\' || \')\n\n\t||\n\n\tinfo.propTypeName === \'arrayOf\' && (\n\t\t<div>\n\t\t\tArrayOf: ([\n\t\t\t<div className="axe-markdown-props-table__inner">\n\t\t\t\t{\n\t\t\t\t\treaderFriendlyPropType({ info: info.allowedChildrenPropType.info })\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t])\n\t\t</div>\n\t)\n\n\t||\n\n\tinfo.propTypeName === \'objectOf\' && (\n\t\t<div>\n\t\t\tArrayOf: ([\n\t\t\t<div className="axe-markdown-props-table__inner">\n\t\t\t\t{\n\t\t\t\t\treaderFriendlyPropType({ info: info.allowedChildrenPropType.info })\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t])\n\t\t</div>\n\t)\n\n\t||\n\n\tinfo.propTypeName === \'shape\' && (\n\t\t<div>\n\t\t\tObject with Shape: (\n\t\t\t{\'{\'}\n\t\t\t{\n\t\t\t\treduce(info.objectShape, (rows, {info}, key) => [\n\t\t\t\t...rows,\n\t\t\t\t<div className="axe-markdown-props-table__inner" key={key}>\n\t\t\t\t\t<span className="axe-markdown-props-table__object-shape-key">{key}</span>: (\n\t\t\t\t\t<div className="axe-markdown-props-table__inner-next-line">\n\t\t\t\t\t\t{readerFriendlyPropType({ info })}\n\t\t\t\t\t</div>\n\t\t\t\t)</div>\n\t\t\t\t])\n\t\t\t}\n\t\t\t{\'}\'}\n\t\t\t)\n\t\t</div>\n\t)\n\n\t||\n\n\tinfo.propTypeName === \'any\' && `Any`\n);' + '\n\n';
var PropsTableComponent = 'const PropsTable = ({ component: { propTypes, defaultProps = {} } }) => (\n\t<table className="axe-markdown-props-table">\n\t\t<thead>\n\t\t\t<tr>\n\t\t\t\t<th>Prop Name</th>\n\t\t\t\t<th className="axe-markdown-props-table__is-required">required?</th>\n\t\t\t\t<th>type</th>\n\t\t\t\t<th>Default</th>\n\t\t\t</tr>\n\t\t</thead>\n\t\t<tbody>\n\t\t\t{\n\t\t\t\treduce(propTypes, (rows, { info }, propName) => [\n\t\t\t\t\t...rows,\n\t\t\t\t\t<tr key={propName}>\n\t\t\t\t\t\t<td>\n\t\t\t\t\t\t\t{propName}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t\t<td className="axe-markdown-props-table__is-required">\n\t\t\t\t\t\t\t{info.isRequired ? \'\u2705\' : null}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t\t<td>\n\t\t\t\t\t\t\t{readerFriendlyPropType({ info })}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t\t<td className="axe-markdown-props-table__default-props">\n\t\t\t\t\t\t\t{JSON.stringify(defaultProps[propName], null, 2)}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t</tr>\n\t\t\t\t], [])\n\t\t\t}\n\t\t</tbody>\n\t</table>\n);\n\nconst readerFriendlyPropType = ({ info }) => (\n\n\tinfo.propTypeName === \'array\' && `Array`\n\n\t||\n\n\tinfo.propTypeName === \'bool\' && `Boolean`\n\n\t||\n\n\tinfo.propTypeName === \'func\' && `Function`\n\n\t||\n\n\tinfo.propTypeName === \'number\' && `Number`\n\n\t||\n\n\tinfo.propTypeName === \'object\' && `Object`\n\n\t||\n\n\tinfo.propTypeName === \'string\' && `String`\n\n\t||\n\n\tinfo.propTypeName === \'symbol\' && `Symbol`\n\n\t||\n\n\tinfo.propTypeName === \'node\' && `Number || String || React.Element || Array`\n\n\t||\n\n\tinfo.propTypeName === \'element\' && `React.Element`\n\n\t||\n\n\tinfo.propTypeName === \'instanceOf\' && `Instance of: ${info.className}`\n\n\t||\n\n\tinfo.propTypeName === \'oneOf\' && `One of: (${JSON.stringify(info.allowedValues, null, 3)})`\n\n\t||\n\n\tinfo.propTypeName === \'oneOfType\' && info.allowedPropTypes.map(({ info }) => (\n\t\treaderFriendlyPropType({ info })\n\t)).join(\' || \')\n\n\t||\n\n\tinfo.propTypeName === \'arrayOf\' && (\n\t\t<div>\n\t\t\tArrayOf: ([\n\t\t\t<div className="axe-markdown-props-table__inner">\n\t\t\t\t{\n\t\t\t\t\treaderFriendlyPropType({ info: info.allowedChildrenPropType.info })\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t])\n\t\t</div>\n\t)\n\n\t||\n\n\tinfo.propTypeName === \'objectOf\' && (\n\t\t<div>\n\t\t\tArrayOf: ([\n\t\t\t<div className="axe-markdown-props-table__inner">\n\t\t\t\t{\n\t\t\t\t\treaderFriendlyPropType({ info: info.allowedChildrenPropType.info })\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t])\n\t\t</div>\n\t)\n\n\t||\n\n\tinfo.propTypeName === \'shape\' && (\n\t\t<div>\n\t\t\tObject with Shape: (\n\t\t\t{\'{\'}\n\t\t\t{\n\t\t\t\treduce(info.objectShape, (rows, {info}, key) => [\n\t\t\t\t...rows,\n\t\t\t\t<div className="axe-markdown-props-table__inner" key={key}>\n\t\t\t\t\t<span className="axe-markdown-props-table__object-shape-key">{key}</span>: (\n\t\t\t\t\t<div className="axe-markdown-props-table__inner-next-line">\n\t\t\t\t\t\t{readerFriendlyPropType({ info })}\n\t\t\t\t\t</div>\n\t\t\t\t)</div>\n\t\t\t\t], [])\n\t\t\t}\n\t\t\t{\'}\'}\n\t\t\t)\n\t\t</div>\n\t)\n\n\t||\n\n\tinfo.propTypeName === \'any\' && `Any`\n);' + '\n\n';
var HtmlStyleTag = 'class HtmlStyleTag extends React.Component {\n\trender() {\n\n\t\tconst {content} = this.props;\n\n\t\treturn ReactDOM.createPortal(\n\t\t\t<style dangerouslySetInnerHTML={{__html:content}}/> ,\n\t\t\tdocument.head\n\t\t);\n\t}\n}' + '\n\n';

@@ -85,0 +85,0 @@

2

package.json
{
"name": "axe-markdown-loader",
"version": "2.0.2",
"version": "2.0.3",
"description": "allows you to import md files as React components and easy creation of documentation",

@@ -5,0 +5,0 @@ "main": "index.production.js",

4

src/components/PropsTable.js

@@ -1,2 +0,2 @@

const PropsTable = ({ component: { propTypes, defaultProps } }) => (
const PropsTable = ({ component: { propTypes, defaultProps = {} } }) => (
<table className="axe-markdown-props-table">

@@ -128,3 +128,3 @@ <thead>

)</div>
])
], [])
}

@@ -131,0 +131,0 @@ {'}'}

example/example.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc