nuxt-strapi-blocks-renderer 1.0.8 → 1.0.10
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.
- package/README.md +23 -6
- package/dist/module.d.mts +2 -2
- package/dist/module.d.ts +2 -2
- package/dist/module.json +2 -2
- package/dist/runtime/components/StrapiBlocksText.vue +3 -3
- package/dist/runtime/components/blocks/ImageNode.vue +1 -1
- package/dist/runtime/components/blocks/inline/LinkInlineNode.vue +1 -1
- package/dist/runtime/composables/useBlocksText.d.ts +2 -2
- package/dist/runtime/types/index.d.ts +51 -51
- package/dist/runtime/utils/index.js +32 -53
- package/package.json +25 -22
package/README.md
CHANGED
|
@@ -343,6 +343,17 @@ To run the Vitest unit tests, run the following command:
|
|
|
343
343
|
npm run test
|
|
344
344
|
````
|
|
345
345
|
|
|
346
|
+
### Build
|
|
347
|
+
|
|
348
|
+
To build the module, first install all dependencies and [generate the type stubs](#type-stubs).
|
|
349
|
+
Then run the build script:
|
|
350
|
+
|
|
351
|
+
```bash
|
|
352
|
+
npm run build
|
|
353
|
+
```
|
|
354
|
+
|
|
355
|
+
The module files will be output to the `dist` folder.
|
|
356
|
+
|
|
346
357
|
### Release
|
|
347
358
|
|
|
348
359
|
To release a new version of the strapi blocks renderer nuxt module, take the following steps:
|
|
@@ -350,12 +361,18 @@ To release a new version of the strapi blocks renderer nuxt module, take the fol
|
|
|
350
361
|
1. Increment version number in the `package.json` file
|
|
351
362
|
2. Add changelog entry for the new version number
|
|
352
363
|
3. Run linters and unit tests
|
|
353
|
-
4.
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
364
|
+
4. Build the nuxt module
|
|
365
|
+
|
|
366
|
+
```bash
|
|
367
|
+
npm run build
|
|
368
|
+
```
|
|
369
|
+
|
|
370
|
+
5. Log in to NPM using your access token
|
|
371
|
+
6. Run the `release` command
|
|
372
|
+
|
|
373
|
+
```bash
|
|
374
|
+
npm run release
|
|
375
|
+
```
|
|
359
376
|
|
|
360
377
|
[github-actions-src]: https://github.com/freb97/nuxt-strapi-blocks-renderer/actions/workflows/ci.yml/badge.svg
|
|
361
378
|
[github-actions-href]: https://github.com/freb97/nuxt-strapi-blocks-renderer/actions
|
package/dist/module.d.mts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as _nuxt_schema from '@nuxt/schema';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
interface ModuleOptions {
|
|
4
4
|
prefix: string;
|
|
5
5
|
blocksPrefix: string;
|
|
6
|
-
}
|
|
6
|
+
}
|
|
7
7
|
declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
|
|
8
8
|
|
|
9
9
|
export { type ModuleOptions, _default as default };
|
package/dist/module.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as _nuxt_schema from '@nuxt/schema';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
interface ModuleOptions {
|
|
4
4
|
prefix: string;
|
|
5
5
|
blocksPrefix: string;
|
|
6
|
-
}
|
|
6
|
+
}
|
|
7
7
|
declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
|
|
8
8
|
|
|
9
9
|
export { type ModuleOptions, _default as default };
|
package/dist/module.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
-
import { useBlocksText } from '#strapi-blocks-renderer/composables/useBlocksText';
|
|
3
|
-
|
|
4
2
|
import type { VNode } from 'vue';
|
|
5
3
|
import type { BlockNode } from '#strapi-blocks-renderer/types';
|
|
6
4
|
|
|
5
|
+
import { useBlocksText } from '#strapi-blocks-renderer/composables/useBlocksText';
|
|
6
|
+
|
|
7
7
|
const props = defineProps<{
|
|
8
|
-
nodes: BlockNode[]
|
|
8
|
+
nodes: BlockNode[]
|
|
9
9
|
}>();
|
|
10
10
|
|
|
11
11
|
const { text } = useBlocksText(props.nodes);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { VNode } from 'vue';
|
|
2
2
|
import type { BlockNode } from '#strapi-blocks-renderer/types';
|
|
3
|
-
export
|
|
3
|
+
export interface UseBlocksTextReturn {
|
|
4
4
|
text: VNode[];
|
|
5
|
-
}
|
|
5
|
+
}
|
|
6
6
|
export declare const useBlocksText: (blockNodes: BlockNode[]) => UseBlocksTextReturn;
|
|
@@ -1,67 +1,67 @@
|
|
|
1
1
|
// Inline nodes
|
|
2
2
|
|
|
3
|
-
export
|
|
4
|
-
type: 'text'
|
|
5
|
-
text: string
|
|
6
|
-
bold?: boolean
|
|
7
|
-
italic?: boolean
|
|
8
|
-
underline?: boolean
|
|
9
|
-
strikethrough?: boolean
|
|
10
|
-
code?: boolean
|
|
11
|
-
}
|
|
3
|
+
export interface TextInlineNode {
|
|
4
|
+
type: 'text'
|
|
5
|
+
text: string
|
|
6
|
+
bold?: boolean
|
|
7
|
+
italic?: boolean
|
|
8
|
+
underline?: boolean
|
|
9
|
+
strikethrough?: boolean
|
|
10
|
+
code?: boolean
|
|
11
|
+
}
|
|
12
12
|
|
|
13
|
-
export
|
|
14
|
-
type: 'link'
|
|
15
|
-
url: string
|
|
16
|
-
children: TextInlineNode[]
|
|
17
|
-
}
|
|
13
|
+
export interface LinkInlineNode {
|
|
14
|
+
type: 'link'
|
|
15
|
+
url: string
|
|
16
|
+
children: TextInlineNode[]
|
|
17
|
+
}
|
|
18
18
|
|
|
19
|
-
export
|
|
20
|
-
type: 'list-item'
|
|
21
|
-
children: DefaultInlineNode[]
|
|
22
|
-
}
|
|
19
|
+
export interface ListItemInlineNode {
|
|
20
|
+
type: 'list-item'
|
|
21
|
+
children: DefaultInlineNode[]
|
|
22
|
+
}
|
|
23
23
|
|
|
24
24
|
export type DefaultInlineNode = TextInlineNode | LinkInlineNode;
|
|
25
25
|
|
|
26
26
|
// Typed nodes
|
|
27
27
|
|
|
28
|
-
export
|
|
29
|
-
type: 'paragraph'
|
|
30
|
-
children: DefaultInlineNode[]
|
|
31
|
-
}
|
|
28
|
+
export interface ParagraphBlockNode {
|
|
29
|
+
type: 'paragraph'
|
|
30
|
+
children: DefaultInlineNode[]
|
|
31
|
+
}
|
|
32
32
|
|
|
33
|
-
export
|
|
34
|
-
type: 'heading'
|
|
35
|
-
level: 1 | 2 | 3 | 4 | 5 | 6
|
|
36
|
-
children: DefaultInlineNode[]
|
|
37
|
-
}
|
|
33
|
+
export interface HeadingBlockNode {
|
|
34
|
+
type: 'heading'
|
|
35
|
+
level: 1 | 2 | 3 | 4 | 5 | 6
|
|
36
|
+
children: DefaultInlineNode[]
|
|
37
|
+
}
|
|
38
38
|
|
|
39
|
-
export
|
|
40
|
-
type: 'list'
|
|
41
|
-
format: 'ordered' | 'unordered'
|
|
42
|
-
children: (ListItemInlineNode | ListBlockNode)[]
|
|
43
|
-
}
|
|
39
|
+
export interface ListBlockNode {
|
|
40
|
+
type: 'list'
|
|
41
|
+
format: 'ordered' | 'unordered'
|
|
42
|
+
children: (ListItemInlineNode | ListBlockNode)[]
|
|
43
|
+
}
|
|
44
44
|
|
|
45
|
-
export
|
|
46
|
-
type: 'quote'
|
|
47
|
-
children: DefaultInlineNode[]
|
|
48
|
-
}
|
|
45
|
+
export interface QuoteBlockNode {
|
|
46
|
+
type: 'quote'
|
|
47
|
+
children: DefaultInlineNode[]
|
|
48
|
+
}
|
|
49
49
|
|
|
50
|
-
export
|
|
51
|
-
type: 'code'
|
|
52
|
-
children: TextInlineNode[]
|
|
53
|
-
}
|
|
50
|
+
export interface CodeBlockNode {
|
|
51
|
+
type: 'code'
|
|
52
|
+
children: TextInlineNode[]
|
|
53
|
+
}
|
|
54
54
|
|
|
55
|
-
export
|
|
56
|
-
type: 'image'
|
|
57
|
-
image: any
|
|
58
|
-
children: [{ type: 'text'
|
|
59
|
-
}
|
|
55
|
+
export interface ImageBlockNode {
|
|
56
|
+
type: 'image'
|
|
57
|
+
image: any
|
|
58
|
+
children: [{ type: 'text', text: '' }]
|
|
59
|
+
}
|
|
60
60
|
|
|
61
61
|
export type BlockNode =
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
62
|
+
ParagraphBlockNode |
|
|
63
|
+
QuoteBlockNode |
|
|
64
|
+
CodeBlockNode |
|
|
65
|
+
HeadingBlockNode |
|
|
66
|
+
ListBlockNode |
|
|
67
|
+
ImageBlockNode;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { resolveComponent, useRuntimeConfig
|
|
1
|
+
import { h, resolveComponent, useRuntimeConfig } from "#imports";
|
|
2
2
|
const prefix = () => {
|
|
3
3
|
const { public: { strapiBlocksRenderer } } = useRuntimeConfig();
|
|
4
4
|
return strapiBlocksRenderer.blocksPrefix;
|
|
@@ -15,20 +15,15 @@ const getNodeText = (node) => {
|
|
|
15
15
|
};
|
|
16
16
|
export const textInlineNode = (node) => {
|
|
17
17
|
const text = getNodeText(node);
|
|
18
|
-
if (node.bold)
|
|
19
|
-
|
|
20
|
-
if (node.
|
|
21
|
-
|
|
22
|
-
if (node.
|
|
23
|
-
return h(resolveComponent(prefix() + "UnderlineInlineNode"), () => text);
|
|
24
|
-
if (node.strikethrough)
|
|
25
|
-
return h(resolveComponent(prefix() + "StrikethroughInlineNode"), () => text);
|
|
26
|
-
if (node.code)
|
|
27
|
-
return h(resolveComponent(prefix() + "CodeInlineNode"), () => text);
|
|
18
|
+
if (node.bold) return h(resolveComponent(`${prefix()}BoldInlineNode`), () => text);
|
|
19
|
+
if (node.italic) return h(resolveComponent(`${prefix()}ItalicInlineNode`), () => text);
|
|
20
|
+
if (node.underline) return h(resolveComponent(`${prefix()}UnderlineInlineNode`), () => text);
|
|
21
|
+
if (node.strikethrough) return h(resolveComponent(`${prefix()}StrikethroughInlineNode`), () => text);
|
|
22
|
+
if (node.code) return h(resolveComponent(`${prefix()}CodeInlineNode`), () => text);
|
|
28
23
|
return text;
|
|
29
24
|
};
|
|
30
25
|
export const linkInlineNode = (node) => {
|
|
31
|
-
const linkComponent = resolveComponent(prefix()
|
|
26
|
+
const linkComponent = resolveComponent(`${prefix()}LinkInlineNode`);
|
|
32
27
|
return h(linkComponent, { url: node.url }, () => node.children.map((childNode) => {
|
|
33
28
|
return textInlineNode(childNode);
|
|
34
29
|
}));
|
|
@@ -41,65 +36,49 @@ export const defaultInlineNode = (node) => {
|
|
|
41
36
|
}
|
|
42
37
|
};
|
|
43
38
|
export const listItemInlineNode = (node) => {
|
|
44
|
-
const listItemComponent = resolveComponent(prefix()
|
|
45
|
-
return h(
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
(childNode) => defaultInlineNode(childNode)
|
|
49
|
-
)
|
|
50
|
-
);
|
|
39
|
+
const listItemComponent = resolveComponent(`${prefix()}ListItemInlineNode`);
|
|
40
|
+
return h(listItemComponent, () => node.children.map(
|
|
41
|
+
(childNode) => defaultInlineNode(childNode)
|
|
42
|
+
));
|
|
51
43
|
};
|
|
52
44
|
export const headingBlockNode = (node) => {
|
|
53
|
-
const headingComponent = resolveComponent(prefix()
|
|
54
|
-
return h(
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
(childNode) => defaultInlineNode(childNode)
|
|
58
|
-
)
|
|
59
|
-
);
|
|
45
|
+
const headingComponent = resolveComponent(`${prefix()}Heading${node.level}Node`);
|
|
46
|
+
return h(headingComponent, () => node.children.map(
|
|
47
|
+
(childNode) => defaultInlineNode(childNode)
|
|
48
|
+
));
|
|
60
49
|
};
|
|
61
50
|
export const paragraphBlockNode = (node) => {
|
|
62
|
-
const paragraphComponent = resolveComponent(prefix()
|
|
63
|
-
return h(
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
(childNode) => defaultInlineNode(childNode)
|
|
67
|
-
)
|
|
68
|
-
);
|
|
51
|
+
const paragraphComponent = resolveComponent(`${prefix()}ParagraphNode`);
|
|
52
|
+
return h(paragraphComponent, () => node.children.map(
|
|
53
|
+
(childNode) => defaultInlineNode(childNode)
|
|
54
|
+
));
|
|
69
55
|
};
|
|
70
56
|
export const codeBlockNode = (node) => {
|
|
71
|
-
const codeComponent = resolveComponent(prefix()
|
|
72
|
-
return h(
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
(childNode) => textInlineNode(childNode)
|
|
76
|
-
)
|
|
77
|
-
);
|
|
57
|
+
const codeComponent = resolveComponent(`${prefix()}CodeNode`);
|
|
58
|
+
return h(codeComponent, () => node.children.map(
|
|
59
|
+
(childNode) => textInlineNode(childNode)
|
|
60
|
+
));
|
|
78
61
|
};
|
|
79
62
|
export const quoteBlockNode = (node) => {
|
|
80
|
-
const quoteComponent = resolveComponent(prefix()
|
|
81
|
-
return h(
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
(childNode) => defaultInlineNode(childNode)
|
|
85
|
-
)
|
|
86
|
-
);
|
|
63
|
+
const quoteComponent = resolveComponent(`${prefix()}QuoteNode`);
|
|
64
|
+
return h(quoteComponent, () => node.children.map(
|
|
65
|
+
(childNode) => defaultInlineNode(childNode)
|
|
66
|
+
));
|
|
87
67
|
};
|
|
88
68
|
export const listBlockNode = (node) => {
|
|
89
69
|
const listType = node.format === "ordered" ? "OrderedListNode" : "UnorderedListNode";
|
|
90
70
|
const listComponent = resolveComponent(prefix() + listType);
|
|
91
71
|
return h(listComponent, () => node.children.map(
|
|
92
72
|
(childNode) => {
|
|
93
|
-
if (childNode.type === "list") {
|
|
94
|
-
return listBlockNode(childNode);
|
|
95
|
-
} else if (childNode.type === "list-item") {
|
|
73
|
+
if (childNode.type === "list-item") {
|
|
96
74
|
return listItemInlineNode(childNode);
|
|
97
75
|
}
|
|
76
|
+
return listBlockNode(childNode);
|
|
98
77
|
}
|
|
99
78
|
));
|
|
100
79
|
};
|
|
101
80
|
export const imageBlockNode = (node) => {
|
|
102
|
-
const imageComponent = resolveComponent(prefix()
|
|
81
|
+
const imageComponent = resolveComponent(`${prefix()}ImageNode`);
|
|
103
82
|
return h(imageComponent, {
|
|
104
83
|
image: node.image
|
|
105
84
|
});
|
|
@@ -109,8 +88,6 @@ export const renderBlocks = (blockNodes) => {
|
|
|
109
88
|
switch (blockNode.type) {
|
|
110
89
|
case "heading":
|
|
111
90
|
return headingBlockNode(blockNode);
|
|
112
|
-
case "paragraph":
|
|
113
|
-
return paragraphBlockNode(blockNode);
|
|
114
91
|
case "code":
|
|
115
92
|
return codeBlockNode(blockNode);
|
|
116
93
|
case "list":
|
|
@@ -119,6 +96,8 @@ export const renderBlocks = (blockNodes) => {
|
|
|
119
96
|
return quoteBlockNode(blockNode);
|
|
120
97
|
case "image":
|
|
121
98
|
return imageBlockNode(blockNode);
|
|
99
|
+
default:
|
|
100
|
+
return paragraphBlockNode(blockNode);
|
|
122
101
|
}
|
|
123
102
|
});
|
|
124
103
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nuxt-strapi-blocks-renderer",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.10",
|
|
4
4
|
"description": "Renderer for the strapi CMS blocks text content element.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -25,45 +25,48 @@
|
|
|
25
25
|
"dist"
|
|
26
26
|
],
|
|
27
27
|
"scripts": {
|
|
28
|
-
"prepack": "nuxt-module-build build",
|
|
29
28
|
"dev": "npm run dev:basic",
|
|
30
|
-
"dev:prepare": "nuxt-module-build
|
|
29
|
+
"dev:prepare": "nuxt-module-build prepare && nuxi prepare playground/basic && nuxi prepare playground/custom",
|
|
31
30
|
"dev:basic": "nuxi dev playground/basic",
|
|
32
31
|
"dev:custom": "nuxi dev playground/custom",
|
|
33
|
-
"
|
|
34
|
-
"release
|
|
32
|
+
"build": "nuxt-module-build build",
|
|
33
|
+
"release": "npm run lint && npm run test && npm run build && npm publish",
|
|
34
|
+
"release:ci": "npm run build && npm publish",
|
|
35
35
|
"lint:es": "eslint './**/*.{js,ts,vue}' --max-warnings=0",
|
|
36
36
|
"lint:types": "vue-tsc --noEmit",
|
|
37
37
|
"test": "vitest run",
|
|
38
|
-
"test:watch": "vitest watch"
|
|
38
|
+
"test:watch": "vitest watch",
|
|
39
|
+
"renovate:config:validate": "renovate-config-validator"
|
|
39
40
|
},
|
|
40
41
|
"dependencies": {
|
|
41
42
|
"@nuxt/kit": "^3.12.3",
|
|
42
43
|
"defu": "^6.1.4"
|
|
43
44
|
},
|
|
44
45
|
"devDependencies": {
|
|
46
|
+
"@antfu/eslint-config": "^2.25.1",
|
|
45
47
|
"@nuxt/devtools": "^1.3.9",
|
|
46
|
-
"@nuxt/
|
|
47
|
-
"@nuxt/
|
|
48
|
-
"@nuxt/
|
|
49
|
-
"@
|
|
50
|
-
"@stylistic/eslint-plugin": "^2.3.0",
|
|
51
|
-
"@types/node": "^20.14.10",
|
|
52
|
-
"@typescript-eslint/eslint-plugin": "^7.16.0",
|
|
48
|
+
"@nuxt/module-builder": "^0.8.3",
|
|
49
|
+
"@nuxt/schema": "^3.12.4",
|
|
50
|
+
"@nuxt/test-utils": "^3.14.1",
|
|
51
|
+
"@types/node": "^22.3.0",
|
|
53
52
|
"eslint": "^8.57.0",
|
|
54
|
-
"nuxt": "^3.12.
|
|
55
|
-
"
|
|
56
|
-
"vitest": "^
|
|
57
|
-
"vue": "^
|
|
58
|
-
"vue-eslint-parser": "^9.4.3",
|
|
59
|
-
"vue-tsc": "^2.0.26"
|
|
53
|
+
"nuxt": "^3.12.4",
|
|
54
|
+
"renovate": "^38.37.1",
|
|
55
|
+
"vitest": "^2.0.5",
|
|
56
|
+
"vue-tsc": "^2.0.29"
|
|
60
57
|
},
|
|
61
58
|
"keywords": [
|
|
62
|
-
"nuxt",
|
|
59
|
+
"nuxt",
|
|
60
|
+
"nuxt3",
|
|
61
|
+
"nuxtjs",
|
|
62
|
+
"nuxt-module",
|
|
63
|
+
"strapi",
|
|
64
|
+
"strapi-cms",
|
|
65
|
+
"json",
|
|
66
|
+
"blocks"
|
|
63
67
|
],
|
|
64
|
-
"packageManager": "npm@10.2.4",
|
|
65
68
|
"engines": {
|
|
66
|
-
"node": "^18.x || ^20.x"
|
|
69
|
+
"node": "^18.x || ^20.x || ^22.x"
|
|
67
70
|
},
|
|
68
71
|
"stackblitz": {
|
|
69
72
|
"startCommand": "npm run dev:prepare && npm run dev"
|