solid-markdown - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

dist/dev.js

@@ -1,5 +0,6 @@
-import { insert, createComponent, effect, className, Dynamic, mergeProps as mergeProps$1, template } from 'solid-js/web';
+import { insert, createComponent, memo, effect, className, Dynamic, mergeProps as mergeProps$1, template } from 'solid-js/web';
 import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
-import { mergeProps, createMemo, For, Switch, Match } from 'solid-js';
+import { mergeProps, createMemo, createRenderEffect, For, Switch, Match } from 'solid-js';
+import { createStore, reconcile } from 'solid-js/store';
 import { html, find, svg } from 'property-information';
@@ -269,2 +270,3 @@ import { unified } from 'unified';
 var defaults = {
+  renderingStrategy: "memo",
   remarkPlugins: [],
@@ -289,3 +291,7 @@ rehypePlugins: [],
   const options = mergeProps(defaults, opts);
-  const hastNode = createMemo(() => {
+  const [node, setNode] = createStore({
+    type: "root",
+    children: []
+  });
+  const generateNode = createMemo(() => {
     const children = options.children;
@@ -301,8 +307,13 @@ const processor = unified().use(remarkParse).use(options.remarkPlugins || []).use(remarkRehype, {
     }
-    const hastNode2 = processor.runSync(processor.parse(file), file);
-    if (hastNode2.type !== "root") {
+    const hastNode = processor.runSync(processor.parse(file), file);
+    if (hastNode.type !== "root") {
       throw new TypeError("Expected a `root` node");
     }
-    return hastNode2;
+    return hastNode;
   });
+  if (options.renderingStrategy === "reconcile") {
+    createRenderEffect(() => {
+      setNode(reconcile(generateNode()));
+    });
+  }
   return (() => {
@@ -317,3 +328,3 @@ var _el$ = _tmpl$();
       get node() {
-        return hastNode();
+        return memo(() => options.renderingStrategy === "memo")() ? generateNode() : node;
       }
@@ -320,0 +331,0 @@ }));

dist/dev.jsx

 // src/index.tsx
 import remarkParse from "remark-parse";
 import remarkRehype from "remark-rehype";
-import { createMemo as createMemo2, mergeProps } from "solid-js";
+import {
+  createMemo as createMemo2,
+  createRenderEffect,
+  mergeProps
+} from "solid-js";
+import { createStore, reconcile } from "solid-js/store";
 import { html } from "property-information";
@@ -228,2 +233,3 @@ import { unified } from "unified";
 var defaults = {
+  renderingStrategy: "memo",
   remarkPlugins: [],
@@ -248,3 +254,4 @@ rehypePlugins: [],
   const options = mergeProps(defaults, opts);
-  const hastNode = createMemo2(() => {
+  const [node, setNode] = createStore({ type: "root", children: [] });
+  const generateNode = createMemo2(() => {
     const children = options.children;
@@ -260,11 +267,16 @@ const processor = unified().use(remarkParse).use(options.remarkPlugins || []).use(remarkRehype, { allowDangerousHtml: true }).use(options.rehypePlugins || []).use(rehype_filter_default, options);
     }
-    const hastNode2 = processor.runSync(processor.parse(file), file);
-    if (hastNode2.type !== "root") {
+    const hastNode = processor.runSync(processor.parse(file), file);
+    if (hastNode.type !== "root") {
       throw new TypeError("Expected a `root` node");
     }
-    return hastNode2;
+    return hastNode;
   });
+  if (options.renderingStrategy === "reconcile") {
+    createRenderEffect(() => {
+      setNode(reconcile(generateNode()));
+    });
+  }
   return <><div class={options.class}><MarkdownRoot
     context={{ options, schema: html, listDepth: 0 }}
-    node={hastNode()}
+    node={options.renderingStrategy === "memo" ? generateNode() : node}
   /></div></>;
@@ -271,0 +283,0 @@ };

dist/index.d.ts

@@ -93,2 +93,3 @@ import { JSX, Component } from 'solid-js';
     children: string;
+    renderingStrategy: "memo" | "reconcile";
 };
@@ -95,0 +96,0 @@ type PluginOptions = {

dist/index.js

@@ -1,5 +0,6 @@
-import { insert, createComponent, effect, className, Dynamic, mergeProps as mergeProps$1, template } from 'solid-js/web';
+import { insert, createComponent, memo, effect, className, Dynamic, mergeProps as mergeProps$1, template } from 'solid-js/web';
 import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
-import { mergeProps, createMemo, For, Switch, Match } from 'solid-js';
+import { mergeProps, createMemo, createRenderEffect, For, Switch, Match } from 'solid-js';
+import { createStore, reconcile } from 'solid-js/store';
 import { html, find, svg } from 'property-information';
@@ -269,2 +270,3 @@ import { unified } from 'unified';
 var defaults = {
+  renderingStrategy: "memo",
   remarkPlugins: [],
@@ -289,3 +291,7 @@ rehypePlugins: [],
   const options = mergeProps(defaults, opts);
-  const hastNode = createMemo(() => {
+  const [node, setNode] = createStore({
+    type: "root",
+    children: []
+  });
+  const generateNode = createMemo(() => {
     const children = options.children;
@@ -299,8 +305,13 @@ const processor = unified().use(remarkParse).use(options.remarkPlugins || []).use(remarkRehype, {
     } else if (children !== void 0 && options.children !== null) ;
-    const hastNode2 = processor.runSync(processor.parse(file), file);
-    if (hastNode2.type !== "root") {
+    const hastNode = processor.runSync(processor.parse(file), file);
+    if (hastNode.type !== "root") {
       throw new TypeError("Expected a `root` node");
     }
-    return hastNode2;
+    return hastNode;
   });
+  if (options.renderingStrategy === "reconcile") {
+    createRenderEffect(() => {
+      setNode(reconcile(generateNode()));
+    });
+  }
   return (() => {
@@ -315,3 +326,3 @@ var _el$ = _tmpl$();
       get node() {
-        return hastNode();
+        return memo(() => options.renderingStrategy === "memo")() ? generateNode() : node;
       }
@@ -318,0 +329,0 @@ }));

dist/index.jsx

 // src/index.tsx
 import remarkParse from "remark-parse";
 import remarkRehype from "remark-rehype";
-import { createMemo as createMemo2, mergeProps } from "solid-js";
+import {
+  createMemo as createMemo2,
+  createRenderEffect,
+  mergeProps
+} from "solid-js";
+import { createStore, reconcile } from "solid-js/store";
 import { html } from "property-information";
@@ -228,2 +233,3 @@ import { unified } from "unified";
 var defaults = {
+  renderingStrategy: "memo",
   remarkPlugins: [],
@@ -248,3 +254,4 @@ rehypePlugins: [],
   const options = mergeProps(defaults, opts);
-  const hastNode = createMemo2(() => {
+  const [node, setNode] = createStore({ type: "root", children: [] });
+  const generateNode = createMemo2(() => {
     const children = options.children;
@@ -257,11 +264,16 @@ const processor = unified().use(remarkParse).use(options.remarkPlugins || []).use(remarkRehype, { allowDangerousHtml: true }).use(options.rehypePlugins || []).use(rehype_filter_default, options);
     }
-    const hastNode2 = processor.runSync(processor.parse(file), file);
-    if (hastNode2.type !== "root") {
+    const hastNode = processor.runSync(processor.parse(file), file);
+    if (hastNode.type !== "root") {
       throw new TypeError("Expected a `root` node");
     }
-    return hastNode2;
+    return hastNode;
   });
+  if (options.renderingStrategy === "reconcile") {
+    createRenderEffect(() => {
+      setNode(reconcile(generateNode()));
+    });
+  }
   return <><div class={options.class}><MarkdownRoot
     context={{ options, schema: html, listDepth: 0 }}
-    node={hastNode()}
+    node={options.renderingStrategy === "memo" ? generateNode() : node}
   /></div></>;
@@ -268,0 +280,0 @@ };

package.json

 {
   "name": "solid-markdown",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Markdown renderer for solid-js",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -41,4 +41,18 @@ <p>
 
+## Rendering strategy
+There's an extra option you can pass to the markdown component: `renderingStrategy: "memo" | "reconcile"`.
+
+The default value is `"memo"`, which means that the markdown parser will generate a new full AST tree each time (inside a `useMemo`), and use that.
+As a consequence, the full DOM will be re-rendered, even the markdown nodes that haven't changed. (Should be fine 90% of the time).
+
+Using `reconcile` will switch the strategy to using a solid store with the `reconcile` function (https://docs.solidjs.com/reference/store-utilities/reconcile). This will diff the previous and next markdown ASTs and only trigger re-renders for the parts that have changed.
+This will help with cases like streaming partial content and updating the markdown gradually (see https://github.com/andi23rosca/solid-markdown/issues/32).
+
+
+```tsx
+<SolidMarkdown renderingStrategy="reconcile" children={markdown} />;
+```
+
 ## TODO
 
 - [ ] Port unit tests from from original library

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

49252

increased by5.34%

Lines of code

1310

increased by3.72%

Number of lines in readme file

58

increased by31.82%

No dependency changes