comark-solid 0.0.3 → 0.1.1

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>
+  );
 }
 ```
 
@@ -107,7 +109,7 @@ Use the `:` prefix to pass typed values:
 ### Slots
 
 The default slot is passed as `children`.
-Named slots (e.g. `#header`) are passed as camelCase props prefixed with `slot` (`slotHeader`).
+Named slots (e.g. `#header`) are passed as props prefixed with `slot` (`slotHeader`).
 
 ```markdown
 ::card

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 { isHtmlVoidElement, isMarkdownDocument, pascalCase, resolveAttributes, toNativeAttributes } from "comark/utils";
+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: {
@@ -36,26 +36,33 @@ function toElementNode(node) {
 		node
 	};
 }
-const VOID_ELEMENTS = /* @__PURE__ */ new Set([
-	"hr",
-	"br",
-	"img"
-]);
 function resolveProps(node, renderData) {
 	return resolveAttributes(getAttributes(node), renderData, { parseJson: true });
 }
+function scopeRenderData(node, props, renderData) {
+	return Object.keys(getAttributes(node)).some((key) => key !== "$") ? {
+		...renderData,
+		props
+	} : renderData;
+}
 function getSlotName(node) {
 	if (getTag(node) !== "template") return null;
 	const props = getAttributes(node);
-	if (typeof props.name !== "string" || props.name.trim() === "") return null;
-	return props.name.trim();
+	const name = props.name || Object.keys(props).find((key) => key.startsWith("#"))?.slice(1);
+	if (typeof name !== "string" || name.trim() === "") return null;
+	return name.trim();
 }
 function getSlotPropName(slotName) {
 	if (slotName === "default") return "children";
 	return `slot${slotName.charAt(0).toUpperCase() + slotName.slice(1)}`;
 }
 function resolveComponent(element, components) {
-	const component = components[element.tag];
+	function lookup(tag) {
+		const name = pascalCase(tag);
+		return components[`Prose${name}`] || components[name] || components[tag];
+	}
+	const as = getAttributes(element.node).as;
+	const component = typeof as === "string" && lookup(as) || lookup(element.tag);
 	if (!component) return null;
 	return {
 		...element,
@@ -77,28 +84,25 @@ function createNodeRenderer(components) {
 	function renderCustomComponent(element, context) {
 		const { component, node } = element;
 		const props = resolveProps(node, context.renderData);
-		const slots = partitionIntoSlots(node, Object.keys(props).length > 0 ? {
-			...context.renderData,
-			props
-		} : context.renderData);
-		const CustomComponent = dynamic(() => component);
-		return createComponent(Loading, {
+		const slots = partitionIntoSlots(node, scopeRenderData(node, props, context.renderData));
+		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);
-		const children = getChildren(node).map((child) => renderNode(child, {
-			...context,
-			parent: node
+		const resolved = resolveProps(node, context.renderData);
+		const props = toNativeAttributes(tag, node, resolved);
+		const renderData = scopeRenderData(node, resolved, context.renderData);
+		if (isHtmlVoidElement(tag)) return createComponent(Dynamic, mergeProps({ component: tag }, props));
+		const children = getChildren(node).filter((child) => !getSlotName(child)).map((child) => renderNode(child, {
+			parent: node,
+			renderData
 		})).filter(Boolean);
-		return createComponent(Component, mergeProps(props, { children }));
+		return createComponent(Dynamic, mergeProps({ component: tag }, props, { children }));
 	}
 	function partitionIntoSlots(node, childRenderData) {
 		const defaultSlot = [];
@@ -109,7 +113,7 @@ function createNodeRenderer(components) {
 			if (slotName) {
 				const propName = getSlotPropName(slotName);
 				namedSlots[propName] = getChildren(child).map((slotChild) => renderNode(slotChild, {
-					parent: child,
+					parent: node,
 					renderData: childRenderData
 				})).filter(Boolean);
 				continue;
@@ -152,7 +156,7 @@ function createNodeRenderer(components) {
 *  ```
 */
 const MarkdownDocument = (_props) => {
-	const props = merge({
+	const props = mergeProps$1({
 		components: {},
 		data: {},
 		class: void 0
@@ -172,12 +176,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 +196,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 +205,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.1",
   "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",
+    "comark": "^0.8.1",
     "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"
+    "comark": "^0.8.1",
+    "solid-js": "^1.9.0"
   },
   "devEngines": {
     "packageManager": {