comark-solid 0.1.0 → 0.2.0-next.1

package/README.md

@@ -2,6 +2,11 @@
 
 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
@@ -12,20 +17,13 @@ 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 (
-    <Suspense fallback={<div>Loading...</div>}>
-      <Markdown value={markdown} />
-    </Suspense>
-  );
+  return <Markdown value={markdown} />;
 }
 ```
 

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,7 +1,7 @@
-import { Dynamic, className, createComponent, effect, insert, mergeProps, template } from "solid-js/web";
+import { className, createComponent, dynamic, effect, insert, mergeProps, readShallow, template } from "@solidjs/web";
 import { parseMarkdown } from "comark";
 import { isMarkdownDocument, resolveAttributes } from "comark/utils";
-import { Show, Suspense, createMemo, createResource, mergeProps as mergeProps$1 } from "solid-js";
+import { Loading, createMemo, merge } 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,22 +81,24 @@ function createNodeRenderer(components) {
 			...context.renderData,
 			props
 		} : context.renderData);
-		return createComponent(Suspense, {
+		const CustomComponent = dynamic(() => component);
+		return createComponent(Loading, {
 			fallback: null,
 			get children() {
-				return createComponent(Dynamic, mergeProps({ component }, props, slots));
+				return createComponent(CustomComponent, mergeProps(props, slots));
 			}
 		});
 	}
 	function renderNativeElement(element, context) {
 		const { tag, node } = element;
 		const props = resolveProps(node, context.renderData);
-		if (VOID_ELEMENTS.has(tag)) return createComponent(Dynamic, mergeProps({ component: tag }, props));
+		const Component = dynamic(() => tag);
+		if (VOID_ELEMENTS.has(tag)) return createComponent(Component, props);
 		const children = getChildren(node).map((child) => renderNode(child, {
 			...context,
 			parent: node
 		})).filter(Boolean);
-		return createComponent(Dynamic, mergeProps({ component: tag }, props, { children }));
+		return createComponent(Component, mergeProps(props, { children }));
 	}
 	function partitionIntoSlots(node, childRenderData) {
 		const defaultSlot = [];
@@ -150,7 +152,7 @@ function createNodeRenderer(components) {
 *  ```
 */
 const MarkdownDocument = (_props) => {
-	const props = mergeProps$1({
+	const props = merge({
 		components: {},
 		data: {},
 		class: void 0
@@ -170,12 +172,12 @@ const MarkdownDocument = (_props) => {
 		})).filter(Boolean);
 	});
 	const wrapperClass = createMemo(() => ["comark-content", props.class].map((cls) => cls?.trim()).filter(Boolean).join(" "));
-	return (() => {
-		var _el$ = _tmpl$();
-		insert(_el$, renderedNodes);
-		effect(() => className(_el$, wrapperClass()));
-		return _el$;
-	})();
+	var _el$ = _tmpl$();
+	insert(_el$, renderedNodes);
+	effect(() => readShallow(wrapperClass()), (_v$, _$p) => {
+		className(_el$, _v$, _$p);
+	});
+	return _el$;
 };
 //#endregion
 //#region src/components/Markdown.tsx
@@ -190,7 +192,7 @@ const MarkdownDocument = (_props) => {
 * @example
 * ```tsx
 * import { Markdown } from "comark-solid";
-* import { Suspense } from "solid-js";
+* import { Loading } from "solid-js";
 * import { CustomHeading } from "./CustomHeading";
 *
 * const components = {
@@ -199,44 +201,38 @@ const MarkdownDocument = (_props) => {
 *
 * export default function App() {
 *   return (
-*     <Suspense fallback={<div>Loading...</div>}>
+*     <Loading fallback={<div>Loading...</div>}>
 *       <Markdown
 *         value={source}
 *         components={components}
 *       />
-*     </Suspense>
+*     </Loading>
 *   );
 * }
 * ```
 */
 const Markdown = (_props) => {
-	const props = mergeProps$1({
+	const props = merge({
 		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 : parsed();
+		return isMarkdownDocument(value) ? value : parseMarkdown(value, props.options);
 	});
-	return createComponent(Show, {
-		get when() {
+	return createComponent(MarkdownDocument, {
+		get value() {
 			return document();
 		},
-		children: (value) => createComponent(MarkdownDocument, {
-			get value() {
-				return value();
-			},
-			get components() {
-				return props.components;
-			},
-			get data() {
-				return props.data;
-			},
-			get ["class"]() {
-				return props.class;
-			}
-		})
+		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.1.0",
+  "version": "0.2.0-next.1",
   "description": "Solid renderer for Comark.",
   "keywords": [
     "comark",
@@ -31,24 +31,27 @@
     "./package.json": "./package.json"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "tag": "next"
   },
   "devDependencies": {
-    "@solidjs/testing-library": "^0.8.10",
+    "@solidjs/testing-library": "^1.0.0-beta.3",
+    "@solidjs/vite-plugin": "^3.0.0-next.47",
+    "@solidjs/web": "2.0.0-rc.13",
     "@testing-library/jest-dom": "^7.0.1",
     "bumpp": "^11.1.0",
     "comark": "^0.6.2",
-    "eslint-plugin-solid": "~0.18.0",
+    "eslint-plugin-solid": "~0.18.1",
     "jsdom": "^30.0.1",
-    "solid-js": "^1.9.15",
+    "solid-js": "2.0.0-rc.13",
     "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": "^1.9.0"
+    "solid-js": "^2.0.0-rc.6"
   },
   "devEngines": {
     "packageManager": {