@mdit-vue/plugin-component - npm Package Compare versions

Comparing version 0.7.1 to 0.8.0

dist/index.d.ts

@@ -1,12 +0,53 @@
-import { PluginSimple } from 'markdown-it';
-import { RuleBlock } from 'markdown-it/lib/parser_block';
-import { RuleInline } from 'markdown-it/lib/parser_inline';
+import { PluginWithOptions } from 'markdown-it';
+import { RuleBlock } from 'markdown-it/lib/parser_block.js';
+import { RuleInline } from 'markdown-it/lib/parser_inline.js';
 
 /**
+ * Options of @mdit-vue/plugin-component
+ */
+interface ComponentPluginOptions {
+    /**
+     * Extra tags to be treated as block tags.
+     *
+     * By default, all standard [HTML inline elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements) will be
+     * treated as inline tags (excluding [Vue built-in special elements](https://vuejs.org/api/built-in-special-elements.html)).
+     *
+     * In some cases you might want to force some inline tags to behave like block tags. For example, when you create a Vue component
+     * with the same name as a standard HTML inline element (not recommended though).
+     *
+     * You can use this option to specify standard inline tags as block tags.
+     *
+     * Notice that this option is case-sensitive, and has higher priority than the `inlineTags` option.
+     *
+     * @default []
+     */
+    blockTags?: string[];
+    /**
+     * Extra tags to be treated as inline tags.
+     *
+     * By default, only standard [HTML inline elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements) will be
+     * treated as inline tags (excluding [Vue built-in special elements](https://vuejs.org/api/built-in-special-elements.html)).
+     *
+     * All other unknown elements will be treated as block tags, because we are assuming that they are custom Vue components.
+     *
+     * Treating Vue components as block tags would work as expected in most cases. However, in some edge cases, the behavior
+     * of block tags is not ideal with Vue components. For example, when using a HTML block tag at the beginning of a list item,
+     * the following Markdown syntax in the same list item will be invalid, but users might want an inline Vue component there.
+     *
+     * You can use this option to specify unknown tags as inline tags.
+     *
+     * Notice that this option is case-sensitive, and has lower priority than the `blockTags` option.
+     *
+     * @default []
+     */
+    inlineTags?: string[];
+}
+
+/**
  * Replacing the default htmlBlock rule to allow using custom components
  * in markdown
  */
-declare const componentPlugin: PluginSimple;
+declare const componentPlugin: PluginWithOptions<ComponentPluginOptions>;
 
-declare const htmlBlockRule: RuleBlock;
+declare const createHtmlBlockRule: (options: Required<ComponentPluginOptions>) => RuleBlock;
 
@@ -35,10 +76,11 @@ declare const htmlInlineRule: RuleInline;
  */
-declare const inlineTags: string[];
+declare const TAGS_INLINE: string[];
 /**
- * Vue reserved tags
+ * Tags of Vue built-in components
  *
  * @see https://vuejs.org/api/built-in-components.html
+ * @see https://vuejs.org/api/built-in-special-elements.html
  */
-declare const vueReservedTags: string[];
+declare const TAGS_VUE_RESERVED: string[];
 
-export { HTML_OPEN_CLOSE_TAG_RE, HTML_TAG_RE, componentPlugin, htmlBlockRule, htmlInlineRule, inlineTags, vueReservedTags };
+export { ComponentPluginOptions, HTML_OPEN_CLOSE_TAG_RE, HTML_TAG_RE, TAGS_INLINE, TAGS_VUE_RESERVED, componentPlugin, createHtmlBlockRule, htmlInlineRule };

package.json

 {
   "name": "@mdit-vue/plugin-component",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "A markdown-it plugin to allow vue components in markdown",
@@ -51,3 +51,3 @@ "keywords": [
   },
-  "gitHead": "b4b8bc6c054ea2dd9ad9ec7a37a58b5a2147b2bd"
+  "gitHead": "7fd357a18b8bcc347cf17e2e78da3b3ed4242e58"
 }

README.md

@@ -26,3 +26,58 @@ # @mdit-vue/plugin-component
 
-const md = MarkdownIt({ html: true }).use(componentPlugin);
+const md = MarkdownIt({ html: true }).use(componentPlugin, {
+  // options
+});
+
+const rendered = md.render(
+  `\
+<!-- @ shorthand is supported -->
+<Foo @click="onClick" />
+
+<!-- multi-line syntax won't be wrapped with <p> -->
+<Foo
+  class="foo"
+  :bar="bar"
+/>
+`,
+);
 ```
+
+## Options
+
+### blockTags
+
+- Type: `string[]`
+
+- Default: `[]`
+
+- Details:
+
+  Extra tags to be treated as block tags.
+
+  By default, all standard [HTML inline elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements) will be treated as inline tags (excluding [Vue built-in special elements](https://vuejs.org/api/built-in-special-elements.html)).
+
+  In some cases you might want to force some inline tags to behave like block tags. For example, when you create a Vue component with the same name as a standard HTML inline element (not recommended though).
+
+  You can use this option to specify standard inline tags as block tags.
+
+  Notice that this option is case-sensitive, and has higher priority than the [inlineTags](#inlinetags) option.
+
+### inlineTags
+
+- Type: `string[]`
+
+- Default: `[]`
+
+- Details:
+
+  Extra tags to be treated as inline tags.
+
+  By default, only standard [HTML inline elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements) will be treated as inline tags (excluding [Vue built-in special elements](https://vuejs.org/api/built-in-special-elements.html)).
+
+  All other unknown elements will be treated as block tags, because we are assuming that they are custom Vue components.
+
+  Treating Vue components as block tags would work as expected in most cases. However, in some edge cases, the behavior of block tags is not ideal with Vue components. For example, when using a HTML block tag at the beginning of a list item, the following Markdown syntax in the same list item will be invalid, but users might want an inline Vue component there.
+
+  You can use this option to specify unknown tags as inline tags.
+
+  Notice that this option is case-sensitive, and has lower priority than the [blockTags](#blocktags) option.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19716

increased by36.3%

Lines of code

490

increased by15.84%

Number of lines in readme file

83

increased by196.43%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes