marksy - npm Package Compare versions

Comparing version 2.0.1 to 3.0.0

lib/components.js

@@ -12,6 +12,2 @@ 'use strict';
 
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
 var _createRenderer = require('./createRenderer');
@@ -51,5 +47,6 @@
         });
+        var mockedReact = { createElement: options.createElement };
 
-        tracker.tree.push(_react2.default.createElement(function () {
-          return new (Function.prototype.bind.apply(Function, [null].concat(['React'], _toConsumableArray(Object.keys(options.components)), ['return ' + code])))().apply(undefined, [_react2.default].concat(_toConsumableArray(components))) || null;
+        tracker.tree.push(options.createElement(function () {
+          return new (Function.prototype.bind.apply(Function, [null].concat(['React'], _toConsumableArray(Object.keys(options.components)), ['return ' + code])))().apply(undefined, [mockedReact].concat(_toConsumableArray(components))) || null;
         }, { key: tracker.nextElementId++ }));
@@ -63,7 +60,6 @@ } catch (e) {}
         var CodeComponent = function CodeComponent() {
-          return _react2.default.createElement(
-            'pre',
-            null,
-            _react2.default.createElement('code', { className: 'hljs ' + language, dangerouslySetInnerHTML: { __html: options.highlight ? options.highlight.highlightAuto(_code).value : _code } })
-          );
+          return options.createElement('pre', null, options.createElement('code', {
+            className: 'hljs ' + language,
+            dangerouslySetInnerHTML: { __html: options.highlight ? options.highlight.highlightAuto(_code).value : _code }
+          }));
         };
@@ -73,3 +69,3 @@
 
-        tracker.elements[elementId] = _react2.default.createElement(CodeComponent, { key: elementId });
+        tracker.elements[elementId] = options.createElement(CodeComponent, { key: elementId });
 
@@ -76,0 +72,0 @@ tracker.tree.push(tracker.elements[elementId]);

lib/createRenderer.js

@@ -8,6 +8,2 @@ 'use strict';
 
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
 var _marked = require('marked');
@@ -69,3 +65,3 @@
 
-    tracker.elements[elementId] = _react2.default.createElement(options[tag] || tag, Object.assign({
+    tracker.elements[elementId] = options.createElement(options.elements && options.elements[tag] || tag, Object.assign({
       key: elementId
@@ -83,10 +79,9 @@ }, props), inlineContent);
     function CodeComponent() {
-      return _react2.default.createElement(
-        'pre',
-        null,
-        _react2.default.createElement('code', { className: 'hljs ' + language, dangerouslySetInnerHTML: { __html: options.highlight ? options.highlight.highlightAuto(code).value : code } })
-      );
+      return options.createElement('pre', null, options.createElement('code', {
+        className: 'hljs ' + language,
+        dangerouslySetInnerHTML: { __html: options.highlight ? options.highlight.highlightAuto(code).value : code }
+      }));
     }
 
-    tracker.elements[elementId] = _react2.default.createElement(CodeComponent, { key: elementId });
+    tracker.elements[elementId] = options.createElement(CodeComponent, { key: elementId });
 
@@ -101,3 +96,3 @@ tracker.tree.push(tracker.elements[elementId]);
 
-    tracker.tree.push(_react2.default.createElement('div', {
+    tracker.tree.push(options.createElement('div', {
       key: elementId,
@@ -104,0 +99,0 @@ dangerouslySetInnerHTML: {

package.json

 {
   "name": "marksy",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "description": "Convert markdown into react components",
@@ -34,5 +34,9 @@ "main": "lib/index.js",
     "css-loader": "^0.15.2",
+    "inferno-create-element": "^3.3.1",
+    "inferno-server": "^3.3.1",
     "jest": "^20.0.1",
     "json-loader": "^0.5.2",
     "node-libs-browser": "^0.5.2",
+    "preact": "^8.1.0",
+    "preact-render-to-string": "^3.6.3",
     "react": "^15.5.4",
@@ -39,0 +43,0 @@ "react-dom": "^15.5.4",

README.md

 # marksy
-A markdown to custom React components library
+A markdown to custom components library. Supports any virtual DOM library.
 
@@ -10,31 +10,40 @@ ## Install
 ```js
+import React, {createElement} from 'React';
 import marksy from 'marksy'
 // const marksy = require('marksy').marksy
 
-// You can override the default elements with
-// React components
 const compile = marksy({
-  h1 ({id, children}) {},
-  h2 ({id, children}) {},
-  h3 ({id, children}) {},
-  h4 ({id, children}) {},
-  blockquote ({children}) {},
-  hr () {},
-  ol ({children}) {},
-  ul ({children}) {},
-  p ({children}) {},
-  table ({children}) {},
-  thead ({children}) {},
-  tbody ({children}) {},
-  tr ({children}) {},
-  th ({children}) {},
-  td ({children}) {},
-  a ({href, title, target, children}) {},
-  strong ({children}) {},
-  em ({children}) {},
-  br () {},
-  del ({children}) {},
-  img ({src, alt}) {},
-  code ({language, code}) {},
-  codespan ({children}) {}
+  // Pass in whatever creates elements for your
+  // virtual DOM library. h('h1', {})
+  createElement,
+
+  // You can override the default elements with
+  // custom VDOM trees
+  elements: {
+    h1 ({id, children}) {
+      return <h1 className="my-custom-class">{children}</h1>
+    },
+    h2 ({id, children}) {},
+    h3 ({id, children}) {},
+    h4 ({id, children}) {},
+    blockquote ({children}) {},
+    hr () {},
+    ol ({children}) {},
+    ul ({children}) {},
+    p ({children}) {},
+    table ({children}) {},
+    thead ({children}) {},
+    tbody ({children}) {},
+    tr ({children}) {},
+    th ({children}) {},
+    td ({children}) {},
+    a ({href, title, target, children}) {},
+    strong ({children}) {},
+    em ({children}) {},
+    br () {},
+    del ({children}) {},
+    img ({src, alt}) {},
+    code ({language, code}) {},
+    codespan ({children}) {}
+  }
 })
@@ -51,8 +60,10 @@
 ### Custom components
-You can also add your own custom components. You do this by importing `marksy/components`. This build of marksy includes babel transpiler which will convert any HTML to React elements and allow for custom components:
+You can also add your own custom components. You do this by importing `marksy/components`. This build of marksy includes babel transpiler which will convert any HTML to elements and allow for custom components:
 
 ```js
+import React, {createElement} from 'react'
 import marksy from 'marksy/components'
 
 const compile = marksy({
+  createElement,
   components: {
@@ -86,11 +97,13 @@ MyCustomComponent (props) {
 ```js
+import {createElement} from 'react'
 import 'highlight.js/styles/github.css';
-import hljs from 'highlight.js/lib/highlight';
+import highlight from 'highlight.js/lib/highlight';
 import hljsJavascript from 'highlight.js/lib/languages/javascript';
 import marksy from 'marksy/components'
 
-hljs.registerLanguage('javascript', hljsJavascript);
+highlight.registerLanguage('javascript', hljsJavascript);
 
 const compile = marksy({
-  highlight: hljs
+  createElement,
+  highlight
 })
@@ -97,0 +110,0 @@ ```

No alert changes

Improved metrics

Total package byte prevSize

33332

increased by2.8%

Number of lines in readme file

115

increased by12.75%

Worsened metrics

Dev dependency count

20

increased by25%

Lines of code

251

decreased by-1.95%

No dependency changes