comark-solid 0.0.3 → 0.1.0

package/README.md

@@ -2,11 +2,6 @@
 
 Solid renderer for [Comark](https://comark.dev).
 
-> [!WARNING]
-> **Pre-release: Solid 2.0 RC**
->
-> This package targets the Solid 2.0 RC versions of `solid-js` and `@solidjs/web`. Solid 2.0 is not stable yet, so bugs and compatibility issues may occur.
-
 ## Installation
 
 ```bash
@@ -17,13 +12,20 @@ npm install comark-solid comark
 
 Parses Markdown strings and renders them directly.
 
+String input is parsed asynchronously. Wrap the component in Solid's `Suspense` to show a fallback while parsing.
+
 ```tsx
 import { Markdown } from "comark-solid";
+import { Suspense } from "solid-js";
 
 const markdown = "# Hello World";
 
 export default function App() {
-  return <Markdown value={markdown} />;
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <Markdown value={markdown} />
+    </Suspense>
+  );
 }
 ```
 

package/dist/index.d.ts

@@ -104,7 +104,7 @@ interface MarkdownProps extends Omit<MarkdownDocumentProps, "value"> {
  * @example
  * ```tsx
  * import { Markdown } from "comark-solid";
- * import { Loading } from "solid-js";
+ * import { Suspense } from "solid-js";
  * import { CustomHeading } from "./CustomHeading";
  *
  * const components = {
@@ -113,12 +113,12 @@ interface MarkdownProps extends Omit<MarkdownDocumentProps, "value"> {
  *
  * export default function App() {
  *   return (
- *     <Loading fallback={<div>Loading...</div>}>
+ *     <Suspense fallback={<div>Loading...</div>}>
  *       <Markdown
  *         value={source}
  *         components={components}
  *       />
- *     </Loading>
+ *     </Suspense>
  *   );
  * }
  * ```

package/dist/index.js

@@ -1,7 +1,7 @@
-import { className, createComponent, dynamic, effect, insert, mergeProps, template } from "@solidjs/web";
+import { Dynamic, className, createComponent, effect, insert, mergeProps, template } from "solid-js/web";
 import { parseMarkdown } from "comark";
 import { isMarkdownDocument, resolveAttributes } from "comark/utils";
-import { Loading, createMemo, merge } from "solid-js";
+import { Show, Suspense, createMemo, createResource, mergeProps as mergeProps$1 } from "solid-js";
 //#region src/utils/ast.ts
 function getTag(node) {
 	if (Array.isArray(node) && node.length >= 1 && typeof node[0] === "string") return node[0];
@@ -17,7 +17,7 @@ function getChildren(node) {
 }
 //#endregion
 //#region src/components/MarkdownDocument.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
 const DEFAULT_LOCAL_CONTEXT = {
 	parent: void 0,
 	renderData: {
@@ -81,24 +81,22 @@ function createNodeRenderer(components) {
 			...context.renderData,
 			props
 		} : context.renderData);
-		const CustomComponent = dynamic(() => component);
-		return createComponent(Loading, {
+		return createComponent(Suspense, {
 			fallback: null,
 			get children() {
-				return createComponent(CustomComponent, mergeProps(props, slots));
+				return createComponent(Dynamic, mergeProps({ component }, props, slots));
 			}
 		});
 	}
 	function renderNativeElement(element, context) {
 		const { tag, node } = element;
 		const props = resolveProps(node, context.renderData);
-		const Component = dynamic(() => tag);
-		if (VOID_ELEMENTS.has(tag)) return createComponent(Component, props);
+		if (VOID_ELEMENTS.has(tag)) return createComponent(Dynamic, mergeProps({ component: tag }, props));
 		const children = getChildren(node).map((child) => renderNode(child, {
 			...context,
 			parent: node
 		})).filter(Boolean);
-		return createComponent(Component, mergeProps(props, { children }));
+		return createComponent(Dynamic, mergeProps({ component: tag }, props, { children }));
 	}
 	function partitionIntoSlots(node, childRenderData) {
 		const defaultSlot = [];
@@ -152,7 +150,7 @@ function createNodeRenderer(components) {
 *  ```
 */
 const MarkdownDocument = (_props) => {
-	const props = merge({
+	const props = mergeProps$1({
 		components: {},
 		data: {},
 		class: void 0
@@ -172,12 +170,12 @@ const MarkdownDocument = (_props) => {
 		})).filter(Boolean);
 	});
 	const wrapperClass = createMemo(() => ["comark-content", props.class].map((cls) => cls?.trim()).filter(Boolean).join(" "));
-	var _el$ = _tmpl$();
-	insert(_el$, renderedNodes);
-	effect(() => wrapperClass(), (_v$, _$p) => {
-		className(_el$, _v$, _$p);
-	});
-	return _el$;
+	return (() => {
+		var _el$ = _tmpl$();
+		insert(_el$, renderedNodes);
+		effect(() => className(_el$, wrapperClass()));
+		return _el$;
+	})();
 };
 //#endregion
 //#region src/components/Markdown.tsx
@@ -192,7 +190,7 @@ const MarkdownDocument = (_props) => {
 * @example
 * ```tsx
 * import { Markdown } from "comark-solid";
-* import { Loading } from "solid-js";
+* import { Suspense } from "solid-js";
 * import { CustomHeading } from "./CustomHeading";
 *
 * const components = {
@@ -201,38 +199,44 @@ const MarkdownDocument = (_props) => {
 *
 * export default function App() {
 *   return (
-*     <Loading fallback={<div>Loading...</div>}>
+*     <Suspense fallback={<div>Loading...</div>}>
 *       <Markdown
 *         value={source}
 *         components={components}
 *       />
-*     </Loading>
+*     </Suspense>
 *   );
 * }
 * ```
 */
 const Markdown = (_props) => {
-	const props = merge({
+	const props = mergeProps$1({
 		components: {},
 		data: {}
 	}, _props);
+	const [parsed] = createResource(() => typeof props.value === "string" ? [props.value, props.options] : null, ([value, options]) => parseMarkdown(value, options));
 	const document = createMemo(() => {
 		const value = props.value;
-		return isMarkdownDocument(value) ? value : parseMarkdown(value, props.options);
+		return isMarkdownDocument(value) ? value : parsed();
 	});
-	return createComponent(MarkdownDocument, {
-		get value() {
+	return createComponent(Show, {
+		get when() {
 			return document();
 		},
-		get components() {
-			return props.components;
-		},
-		get data() {
-			return props.data;
-		},
-		get ["class"]() {
-			return props.class;
-		}
+		children: (value) => createComponent(MarkdownDocument, {
+			get value() {
+				return value();
+			},
+			get components() {
+				return props.components;
+			},
+			get data() {
+				return props.data;
+			},
+			get ["class"]() {
+				return props.class;
+			}
+		})
 	});
 };
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comark-solid",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "Solid renderer for Comark.",
   "keywords": [
     "comark",
@@ -34,23 +34,21 @@
     "access": "public"
   },
   "devDependencies": {
-    "@solidjs/testing-library": "^1.0.0-beta.3",
-    "@solidjs/vite-plugin": "^3.0.0-next.39",
-    "@solidjs/web": "2.0.0-rc.6",
+    "@solidjs/testing-library": "^0.8.10",
     "@testing-library/jest-dom": "^7.0.1",
     "bumpp": "^11.1.0",
     "comark": "^0.6.2",
     "eslint-plugin-solid": "~0.18.0",
     "jsdom": "^30.0.1",
-    "solid-js": "^2.0.0-rc.6",
+    "solid-js": "^1.9.15",
     "typescript": "^7.0.2",
     "vite": "npm:@voidzero-dev/vite-plus-core@0.3.0",
+    "vite-plugin-solid": "^2.11.14",
     "vite-plus": "0.3.0"
   },
   "peerDependencies": {
-    "@solidjs/web": "^2.0.0-rc.6",
     "comark": "^0.6.2",
-    "solid-js": "^2.0.0-rc.6"
+    "solid-js": "^1.9.0"
   },
   "devEngines": {
     "packageManager": {