nuxt-strapi-blocks-renderer 0.0.1

package/README.md

@@ -0,0 +1,25 @@
+# Nuxt Strapi Blocks Renderer
+
+Renderer module for the Strapi CMS blocks text element.
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Generate type stubs
+npm run dev:prepare
+
+# Develop with the playground
+npm run dev
+
+# Build the playground
+npm run dev:build
+
+# Run ESLint
+npm run lint
+
+# Release new version
+npm run release
+```

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.mts

@@ -0,0 +1,9 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+type ModuleOptions = {
+    prefix: string;
+    blocksPrefix: string;
+};
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+
+export { type ModuleOptions, _default as default };

package/dist/module.d.ts

@@ -0,0 +1,9 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+type ModuleOptions = {
+    prefix: string;
+    blocksPrefix: string;
+};
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+
+export { type ModuleOptions, _default as default };

package/dist/module.json

@@ -0,0 +1,5 @@
+{
+  "name": "strapi-blocks-renderer",
+  "configKey": "strapiBlocksRenderer",
+  "version": "0.0.1"
+}

package/dist/module.mjs

@@ -0,0 +1,45 @@
+import { defineNuxtModule, createResolver, addImports, addComponentsDir } from '@nuxt/kit';
+import { defu } from 'defu';
+
+const module = defineNuxtModule({
+  meta: {
+    name: "strapi-blocks-renderer",
+    configKey: "strapiBlocksRenderer"
+  },
+  defaults: {
+    prefix: "",
+    blocksPrefix: "StrapiBlocksText"
+  },
+  setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    const runtimeDirectory = resolve("./runtime");
+    nuxt.options.alias["#strapi-blocks-renderer"] = resolve(runtimeDirectory);
+    const runtimeConfig = nuxt.options.runtimeConfig;
+    runtimeConfig.public.strapiBlocksRenderer = defu(runtimeConfig.public.strapiBlocksRenderer, options);
+    addImports([
+      {
+        name: "useBlocksText",
+        as: "useBlocksText",
+        from: resolve(runtimeDirectory, "./composables/useBlocksText")
+      }
+    ]);
+    addComponentsDir({
+      path: resolve(runtimeDirectory, "./components"),
+      pathPrefix: false,
+      prefix: options.prefix,
+      global: true,
+      priority: 0
+    });
+    nuxt.hook("components:dirs", (componentsDir) => {
+      componentsDir.push({
+        path: resolve(runtimeDirectory, "./components/blocks"),
+        pathPrefix: false,
+        prefix: options.blocksPrefix,
+        global: true,
+        priority: -10
+      });
+    });
+  }
+});
+
+export { module as default };

package/dist/runtime/components/StrapiBlocksText.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+    import { useBlocksText } from '#strapi-blocks-renderer/composables/useBlocksText';
+
+    import type { BlockNode } from '#strapi-blocks-renderer/types';
+
+    const props = defineProps<{
+        nodes: BlockNode[];
+    }>();
+
+    const { text } = useBlocksText(props.nodes);
+
+    const RenderText = (): VNode[] => {
+        return text;
+    };
+</script>
+
+<template>
+    <RenderText />
+</template>

package/dist/runtime/components/blocks/CodeNode.vue

@@ -0,0 +1,5 @@
+<template>
+    <pre>
+        <slot />
+    </pre>
+</template>

package/dist/runtime/components/blocks/ImageNode.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+    const props = defineProps<{
+        image: any;
+    }>();
+</script>
+
+<template>
+    <img
+        :src="props.image.url"
+        :alt="props.image.alternativeText"
+        :width="props.image.width"
+        :height="props.image.height"
+    >
+</template>

package/dist/runtime/components/blocks/ParagraphNode.vue

@@ -0,0 +1,5 @@
+<template>
+    <p>
+        <slot />
+    </p>
+</template>

package/dist/runtime/components/blocks/QuoteNode.vue

@@ -0,0 +1,5 @@
+<template>
+    <blockquote>
+        <slot />
+    </blockquote>
+</template>

package/dist/runtime/components/blocks/heading/Heading1Node.vue

@@ -0,0 +1,5 @@
+<template>
+    <h1>
+        <slot />
+    </h1>
+</template>

package/dist/runtime/components/blocks/heading/Heading2Node.vue

@@ -0,0 +1,5 @@
+<template>
+    <h2>
+        <slot />
+    </h2>
+</template>

package/dist/runtime/components/blocks/heading/Heading3Node.vue

@@ -0,0 +1,5 @@
+<template>
+    <h3>
+        <slot />
+    </h3>
+</template>

package/dist/runtime/components/blocks/heading/Heading4Node.vue

@@ -0,0 +1,5 @@
+<template>
+    <h4>
+        <slot />
+    </h4>
+</template>

package/dist/runtime/components/blocks/heading/Heading5Node.vue

@@ -0,0 +1,5 @@
+<template>
+    <h5>
+        <slot />
+    </h5>
+</template>

package/dist/runtime/components/blocks/heading/Heading6Node.vue

@@ -0,0 +1,5 @@
+<template>
+    <h6>
+        <slot />
+    </h6>
+</template>

package/dist/runtime/components/blocks/inline/BoldInlineNode.vue

@@ -0,0 +1,5 @@
+<template>
+    <strong>
+        <slot />
+    </strong>
+</template>

package/dist/runtime/components/blocks/inline/CodeInlineNode.vue

@@ -0,0 +1,5 @@
+<template>
+    <code>
+        <slot />
+    </code>
+</template>

package/dist/runtime/components/blocks/inline/ItalicInlineNode.vue

@@ -0,0 +1,5 @@
+<template>
+    <em>
+        <slot />
+    </em>
+</template>

package/dist/runtime/components/blocks/inline/LinkInlineNode.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+    const props = defineProps<{
+        url: string;
+    }>();
+</script>
+
+<template>
+    <a :href="props.url">
+        <slot />
+    </a>
+</template>

package/dist/runtime/components/blocks/inline/ListItemInlineNode.vue

@@ -0,0 +1,5 @@
+<template>
+    <li>
+        <slot />
+    </li>
+</template>

package/dist/runtime/components/blocks/inline/StrikethroughInlineNode.vue

@@ -0,0 +1,5 @@
+<template>
+    <del>
+        <slot />
+    </del>
+</template>

package/dist/runtime/components/blocks/inline/UnderlineInlineNode.vue

@@ -0,0 +1,5 @@
+<template>
+    <u>
+        <slot />
+    </u>
+</template>

package/dist/runtime/components/blocks/list/OrderedListNode.vue

@@ -0,0 +1,5 @@
+<template>
+    <ol>
+        <slot />
+    </ol>
+</template>

package/dist/runtime/components/blocks/list/UnorderedListNode.vue

@@ -0,0 +1,5 @@
+<template>
+    <ul>
+        <slot />
+    </ul>
+</template>

package/dist/runtime/composables/useBlocksText.d.ts

@@ -0,0 +1,6 @@
+import type { VNode } from 'vue';
+import type { BlockNode } from '#strapi-blocks-renderer/types';
+export type UseBlocksTextReturn = {
+    text: VNode[];
+};
+export declare const useBlocksText: (blockNodes: BlockNode[]) => UseBlocksTextReturn;

package/dist/runtime/composables/useBlocksText.mjs

@@ -0,0 +1,7 @@
+import { renderBlocks } from "#strapi-blocks-renderer/utils";
+export const useBlocksText = (blockNodes) => {
+  const textNodes = renderBlocks(blockNodes);
+  return {
+    text: textNodes
+  };
+};

package/dist/runtime/types/index.d.ts

@@ -0,0 +1,67 @@
+// Inline nodes
+
+export type TextInlineNode = {
+    type: 'text';
+    text: string;
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    strikethrough?: boolean;
+    code?: boolean;
+};
+
+export type LinkInlineNode = {
+    type: 'link';
+    url: string;
+    children: TextInlineNode[];
+};
+
+export type ListItemInlineNode = {
+    type: 'list-item';
+    children: DefaultInlineNode[];
+};
+
+export type DefaultInlineNode = TextInlineNode | LinkInlineNode;
+
+// Typed nodes
+
+export type ParagraphBlockNode = {
+    type: 'paragraph';
+    children: DefaultInlineNode[];
+};
+
+export type HeadingBlockNode = {
+    type: 'heading';
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+    children: DefaultInlineNode[];
+};
+
+export type ListBlockNode = {
+    type: 'list';
+    format: 'ordered' | 'unordered';
+    children: (ListItemInlineNode | ListBlockNode)[];
+};
+
+export type QuoteBlockNode = {
+    type: 'quote';
+    children: DefaultInlineNode[];
+};
+
+export type CodeBlockNode = {
+    type: 'code';
+    children: TextInlineNode[];
+};
+
+export type ImageBlockNode = {
+    type: 'image';
+    image: any;
+    children: [{ type: 'text'; text: '' }];
+};
+
+export type BlockNode =
+    ParagraphBlockNode |
+    QuoteBlockNode |
+    CodeBlockNode |
+    HeadingBlockNode |
+    ListBlockNode |
+    ImageBlockNode;

package/dist/runtime/utils/index.d.ts

@@ -0,0 +1,12 @@
+import type { BlockNode } from '#strapi-blocks-renderer/types';
+export declare const textInlineNode: (node: TextInlineNode) => VNode | string;
+export declare const linkInlineNode: (node: LinkInlineNode) => VNode;
+export declare const defaultInlineNode: (node: DefaultInlineNode) => VNode | string | undefined;
+export declare const listItemInlineNode: (node: ListItemInlineNode) => VNode;
+export declare const headingBlockNode: (node: BlockNode) => VNode;
+export declare const paragraphBlockNode: (node: BlockNode) => VNode;
+export declare const codeBlockNode: (node: BlockNode) => VNode;
+export declare const quoteBlockNode: (node: BlockNode) => VNode;
+export declare const listBlockNode: (node: BlockNode) => VNode;
+export declare const imageBlockNode: (node: BlockNode) => VNode;
+export declare const renderBlocks: (blockNodes: BlockNode[]) => VNode[];

package/dist/runtime/utils/index.mjs

@@ -0,0 +1,113 @@
+const prefix = () => {
+  const { public: { strapiBlocksRenderer } } = useRuntimeConfig();
+  return strapiBlocksRenderer.blocksPrefix;
+};
+export const textInlineNode = (node) => {
+  if (node.bold)
+    return h(resolveComponent(prefix() + "BoldInlineNode"), () => node.text);
+  if (node.italic)
+    return h(resolveComponent(prefix() + "ItalicInlineNode"), () => node.text);
+  if (node.underline)
+    return h(resolveComponent(prefix() + "UnderlineInlineNode"), () => node.text);
+  if (node.strikethrough)
+    return h(resolveComponent(prefix() + "StrikethroughInlineNode"), () => node.text);
+  if (node.code)
+    return h(resolveComponent(prefix() + "CodeInlineNode"), () => node.text);
+  return node.text;
+};
+export const linkInlineNode = (node) => {
+  const linkComponent = resolveComponent(prefix() + "LinkInlineNode");
+  return h(linkComponent, { url: node.url }, () => node.children.map((childNode) => {
+    return textInlineNode(childNode);
+  }));
+};
+export const defaultInlineNode = (node) => {
+  if (node.type === "link") {
+    return linkInlineNode(node);
+  } else if (node.type === "text") {
+    return textInlineNode(node);
+  }
+};
+export const listItemInlineNode = (node) => {
+  const listItemComponent = resolveComponent(prefix() + "ListItemInlineNode");
+  return h(
+    listItemComponent,
+    () => node.children.map(
+      (childNode) => defaultInlineNode(childNode)
+    )
+  );
+};
+export const headingBlockNode = (node) => {
+  const level = node.level;
+  const headingComponent = resolveComponent(prefix() + "Heading" + level + "Node");
+  return h(
+    headingComponent,
+    () => node.children.map(
+      (childNode) => defaultInlineNode(childNode)
+    )
+  );
+};
+export const paragraphBlockNode = (node) => {
+  const paragraphComponent = resolveComponent(prefix() + "ParagraphNode");
+  return h(
+    paragraphComponent,
+    () => node.children.map(
+      (childNode) => defaultInlineNode(childNode)
+    )
+  );
+};
+export const codeBlockNode = (node) => {
+  const codeComponent = resolveComponent(prefix() + "CodeNode");
+  return h(
+    codeComponent,
+    () => node.children.map(
+      (childNode) => textInlineNode(childNode)
+    )
+  );
+};
+export const quoteBlockNode = (node) => {
+  const quoteComponent = resolveComponent(prefix() + "QuoteNode");
+  return h(
+    quoteComponent,
+    () => node.children.map(
+      (childNode) => defaultInlineNode(childNode)
+    )
+  );
+};
+export const listBlockNode = (node) => {
+  const listType = node.format === "ordered" ? "OrderedListNode" : "UnorderedListNode";
+  const listComponent = resolveComponent(prefix() + listType);
+  return h(listComponent, () => node.children.map(
+    (childNode) => {
+      if (childNode.type === "list") {
+        return listBlockNode(childNode);
+      } else if (childNode.type === "list-item") {
+        return listItemInlineNode(childNode);
+      }
+    }
+  ));
+};
+export const imageBlockNode = (node) => {
+  const imageComponent = resolveComponent(prefix() + "ImageNode");
+  return h(imageComponent, {
+    image: node.image
+  });
+};
+export const renderBlocks = (blockNodes) => {
+  return blockNodes.map((blockNode) => {
+    switch (blockNode.type) {
+      case "heading":
+        return headingBlockNode(blockNode);
+      case "paragraph":
+        return paragraphBlockNode(blockNode);
+      case "code":
+        return codeBlockNode(blockNode);
+      case "list":
+        return listBlockNode(blockNode);
+      case "quote":
+        return quoteBlockNode(blockNode);
+      case "image":
+        return imageBlockNode(blockNode);
+    }
+  });
+};

package/dist/types.d.mts

@@ -0,0 +1,16 @@
+
+import type { ModuleOptions } from './module'
+
+
+declare module '@nuxt/schema' {
+  interface NuxtConfig { ['strapiBlocksRenderer']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['strapiBlocksRenderer']?: ModuleOptions }
+}
+
+declare module 'nuxt/schema' {
+  interface NuxtConfig { ['strapiBlocksRenderer']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['strapiBlocksRenderer']?: ModuleOptions }
+}
+
+
+export type { ModuleOptions, default } from './module'

package/dist/types.d.ts

@@ -0,0 +1,16 @@
+
+import type { ModuleOptions } from './module'
+
+
+declare module '@nuxt/schema' {
+  interface NuxtConfig { ['strapiBlocksRenderer']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['strapiBlocksRenderer']?: ModuleOptions }
+}
+
+declare module 'nuxt/schema' {
+  interface NuxtConfig { ['strapiBlocksRenderer']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['strapiBlocksRenderer']?: ModuleOptions }
+}
+
+
+export type { ModuleOptions, default } from './module'

package/package.json

@@ -0,0 +1,47 @@
+{
+    "name": "nuxt-strapi-blocks-renderer",
+    "version": "0.0.1",
+    "description": "Renderer for the strapi blocks text element.",
+    "license": "MIT",
+    "type": "module",
+    "exports": {
+        ".": {
+            "types": "./dist/types.d.ts",
+            "import": "./dist/module.mjs",
+            "require": "./dist/module.cjs"
+        }
+    },
+    "main": "./dist/module.cjs",
+    "types": "./dist/types.d.ts",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "prepack": "nuxt-module-build build",
+        "dev": "npm run dev:basic",
+        "dev:basic": "nuxi dev playground/basic",
+        "dev:custom": "nuxi dev playground/custom",
+        "release": "npm run lint && npm run test && npm run prepack && npm publish && git push --follow-tags",
+        "lint": "eslint './**/*.{js,ts,vue}' --max-warnings=0",
+        "test": "vitest run",
+        "test:watch": "vitest watch"
+    },
+    "dependencies": {
+        "@nuxt/kit": "^3.8.2",
+        "defu": "^6.1.3"
+    },
+    "devDependencies": {
+        "@types/node": "^20.10.3",
+        "@nuxt/devtools": "^1.0.6",
+        "@nuxt/eslint-config": "^0.2.0",
+        "@nuxt/module-builder": "^0.5.4",
+        "@nuxt/schema": "^3.8.2",
+        "@nuxt/test-utils": "^3.8.1",
+        "@stylistic/eslint-plugin": "^1.5.1",
+        "eslint": "^8.55.0",
+        "nuxt": "^3.8.2",
+        "vitest": "^1.1.0",
+        "vue": "^3.3.13",
+        "vue-eslint-parser": "^9.3.2"
+    }
+}