comark-solid 0.2.0-next.1 → 0.2.0-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +1 -1
  2. package/dist/index.js +25 -19
  3. package/package.json +3 -3
package/README.md CHANGED
@@ -107,7 +107,7 @@ Use the `:` prefix to pass typed values:
107
107
  ### Slots
108
108
 
109
109
  The default slot is passed as `children`.
110
- Named slots (e.g. `#header`) are passed as camelCase props prefixed with `slot` (`slotHeader`).
110
+ Named slots (e.g. `#header`) are passed as props prefixed with `slot` (`slotHeader`).
111
111
 
112
112
  ```markdown
113
113
  ::card
package/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { className, createComponent, dynamic, effect, insert, mergeProps, readShallow, template } from "@solidjs/web";
2
2
  import { parseMarkdown } from "comark";
3
- import { isMarkdownDocument, resolveAttributes } from "comark/utils";
3
+ import { isHtmlVoidElement, isMarkdownDocument, pascalCase, resolveAttributes, toNativeAttributes } from "comark/utils";
4
4
  import { Loading, createMemo, merge } from "solid-js";
5
5
  //#region src/utils/ast.ts
6
6
  function getTag(node) {
@@ -36,26 +36,33 @@ function toElementNode(node) {
36
36
  node
37
37
  };
38
38
  }
39
- const VOID_ELEMENTS = /* @__PURE__ */ new Set([
40
- "hr",
41
- "br",
42
- "img"
43
- ]);
44
39
  function resolveProps(node, renderData) {
45
40
  return resolveAttributes(getAttributes(node), renderData, { parseJson: true });
46
41
  }
42
+ function scopeRenderData(node, props, renderData) {
43
+ return Object.keys(getAttributes(node)).some((key) => key !== "$") ? {
44
+ ...renderData,
45
+ props
46
+ } : renderData;
47
+ }
47
48
  function getSlotName(node) {
48
49
  if (getTag(node) !== "template") return null;
49
50
  const props = getAttributes(node);
50
- if (typeof props.name !== "string" || props.name.trim() === "") return null;
51
- return props.name.trim();
51
+ const name = props.name || Object.keys(props).find((key) => key.startsWith("#"))?.slice(1);
52
+ if (typeof name !== "string" || name.trim() === "") return null;
53
+ return name.trim();
52
54
  }
53
55
  function getSlotPropName(slotName) {
54
56
  if (slotName === "default") return "children";
55
57
  return `slot${slotName.charAt(0).toUpperCase() + slotName.slice(1)}`;
56
58
  }
57
59
  function resolveComponent(element, components) {
58
- const component = components[element.tag];
60
+ function lookup(tag) {
61
+ const name = pascalCase(tag);
62
+ return components[`Prose${name}`] || components[name] || components[tag];
63
+ }
64
+ const as = getAttributes(element.node).as;
65
+ const component = typeof as === "string" && lookup(as) || lookup(element.tag);
59
66
  if (!component) return null;
60
67
  return {
61
68
  ...element,
@@ -77,10 +84,7 @@ function createNodeRenderer(components) {
77
84
  function renderCustomComponent(element, context) {
78
85
  const { component, node } = element;
79
86
  const props = resolveProps(node, context.renderData);
80
- const slots = partitionIntoSlots(node, Object.keys(props).length > 0 ? {
81
- ...context.renderData,
82
- props
83
- } : context.renderData);
87
+ const slots = partitionIntoSlots(node, scopeRenderData(node, props, context.renderData));
84
88
  const CustomComponent = dynamic(() => component);
85
89
  return createComponent(Loading, {
86
90
  fallback: null,
@@ -91,12 +95,14 @@ function createNodeRenderer(components) {
91
95
  }
92
96
  function renderNativeElement(element, context) {
93
97
  const { tag, node } = element;
94
- const props = resolveProps(node, context.renderData);
98
+ const resolved = resolveProps(node, context.renderData);
99
+ const props = toNativeAttributes(tag, node, resolved);
100
+ const renderData = scopeRenderData(node, resolved, context.renderData);
95
101
  const Component = dynamic(() => tag);
96
- if (VOID_ELEMENTS.has(tag)) return createComponent(Component, props);
97
- const children = getChildren(node).map((child) => renderNode(child, {
98
- ...context,
99
- parent: node
102
+ if (isHtmlVoidElement(tag)) return createComponent(Component, props);
103
+ const children = getChildren(node).filter((child) => !getSlotName(child)).map((child) => renderNode(child, {
104
+ parent: node,
105
+ renderData
100
106
  })).filter(Boolean);
101
107
  return createComponent(Component, mergeProps(props, { children }));
102
108
  }
@@ -109,7 +115,7 @@ function createNodeRenderer(components) {
109
115
  if (slotName) {
110
116
  const propName = getSlotPropName(slotName);
111
117
  namedSlots[propName] = getChildren(child).map((slotChild) => renderNode(slotChild, {
112
- parent: child,
118
+ parent: node,
113
119
  renderData: childRenderData
114
120
  })).filter(Boolean);
115
121
  continue;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "comark-solid",
3
- "version": "0.2.0-next.1",
3
+ "version": "0.2.0-next.2",
4
4
  "description": "Solid renderer for Comark.",
5
5
  "keywords": [
6
6
  "comark",
@@ -40,7 +40,7 @@
40
40
  "@solidjs/web": "2.0.0-rc.13",
41
41
  "@testing-library/jest-dom": "^7.0.1",
42
42
  "bumpp": "^11.1.0",
43
- "comark": "^0.6.2",
43
+ "comark": "^0.8.1",
44
44
  "eslint-plugin-solid": "~0.18.1",
45
45
  "jsdom": "^30.0.1",
46
46
  "solid-js": "2.0.0-rc.13",
@@ -50,7 +50,7 @@
50
50
  },
51
51
  "peerDependencies": {
52
52
  "@solidjs/web": "^2.0.0-rc.6",
53
- "comark": "^0.6.2",
53
+ "comark": "^0.8.1",
54
54
  "solid-js": "^2.0.0-rc.6"
55
55
  },
56
56
  "devEngines": {