create-nextblock 0.16.3 → 0.17.0

package/templates/nextblock-template/components/privacy/ConsentGatedAnalytics.tsx

@@ -1,70 +1,70 @@
-'use client';
-
-// Gates third-party analytics behind explicit consent. Until the visitor opts
-// in, this renders null -> the GTM chunk is never imported and the network tab
-// shows zero analytics bytes, preserving the Lighthouse budget.
-import { useEffect, useRef, useState } from 'react';
-import { DeferredGoogleTagManager } from '../DeferredGoogleTagManager';
-import { DeferredGoogleAnalytics } from '../DeferredGoogleAnalytics';
-import { CONSENT_CHANGE_EVENT, readConsent } from '../../lib/privacy/consent-client';
-
-interface ConsentGatedAnalyticsProps {
-  gtmId?: string;
-  gaMeasurementId?: string;
-  customScripts?: string;
-  nonce?: string;
-}
-
-/** Recreate <script> elements from admin-provided markup so they actually run. */
-function injectCustomScripts(markup: string, nonce?: string) {
-  const parsed = new DOMParser().parseFromString(markup, 'text/html');
-  parsed.querySelectorAll('script').forEach((source) => {
-    const script = document.createElement('script');
-    for (const attr of Array.from(source.attributes)) {
-      script.setAttribute(attr.name, attr.value);
-    }
-    if (nonce) script.setAttribute('nonce', nonce);
-    if (source.textContent) script.textContent = source.textContent;
-    document.head.appendChild(script);
-  });
-}
-
-export function ConsentGatedAnalytics({
-  gtmId,
-  gaMeasurementId,
-  customScripts,
-  nonce,
-}: ConsentGatedAnalyticsProps) {
-  const [analyticsAllowed, setAnalyticsAllowed] = useState(false);
-  const injectedRef = useRef(false);
-
-  useEffect(() => {
-    const sync = () => setAnalyticsAllowed(Boolean(readConsent()?.analytics));
-    sync();
-    window.addEventListener(CONSENT_CHANGE_EVENT, sync);
-    return () => window.removeEventListener(CONSENT_CHANGE_EVENT, sync);
-  }, []);
-
-  useEffect(() => {
-    if (!analyticsAllowed || injectedRef.current) return;
-    const markup = customScripts?.trim();
-    if (!markup) return;
-    injectedRef.current = true;
-    try {
-      injectCustomScripts(markup, nonce);
-    } catch (error) {
-      console.error('Failed to inject consented custom scripts:', error);
-    }
-  }, [analyticsAllowed, customScripts, nonce]);
-
-  if (!analyticsAllowed) return null;
-  if (!gtmId && !gaMeasurementId) return null;
-  return (
-    <>
-      {gtmId && <DeferredGoogleTagManager gtmId={gtmId} nonce={nonce} />}
-      {gaMeasurementId && (
-        <DeferredGoogleAnalytics gaId={gaMeasurementId} nonce={nonce} />
-      )}
-    </>
-  );
-}
+'use client';
+
+// Gates third-party analytics behind explicit consent. Until the visitor opts
+// in, this renders null -> the GTM chunk is never imported and the network tab
+// shows zero analytics bytes, preserving the Lighthouse budget.
+import { useEffect, useRef, useState } from 'react';
+import { DeferredGoogleTagManager } from '../DeferredGoogleTagManager';
+import { DeferredGoogleAnalytics } from '../DeferredGoogleAnalytics';
+import { CONSENT_CHANGE_EVENT, readConsent } from '../../lib/privacy/consent-client';
+
+interface ConsentGatedAnalyticsProps {
+  gtmId?: string;
+  gaMeasurementId?: string;
+  customScripts?: string;
+  nonce?: string;
+}
+
+/** Recreate <script> elements from admin-provided markup so they actually run. */
+function injectCustomScripts(markup: string, nonce?: string) {
+  const parsed = new DOMParser().parseFromString(markup, 'text/html');
+  parsed.querySelectorAll('script').forEach((source) => {
+    const script = document.createElement('script');
+    for (const attr of Array.from(source.attributes)) {
+      script.setAttribute(attr.name, attr.value);
+    }
+    if (nonce) script.setAttribute('nonce', nonce);
+    if (source.textContent) script.textContent = source.textContent;
+    document.head.appendChild(script);
+  });
+}
+
+export function ConsentGatedAnalytics({
+  gtmId,
+  gaMeasurementId,
+  customScripts,
+  nonce,
+}: ConsentGatedAnalyticsProps) {
+  const [analyticsAllowed, setAnalyticsAllowed] = useState(false);
+  const injectedRef = useRef(false);
+
+  useEffect(() => {
+    const sync = () => setAnalyticsAllowed(Boolean(readConsent()?.analytics));
+    sync();
+    window.addEventListener(CONSENT_CHANGE_EVENT, sync);
+    return () => window.removeEventListener(CONSENT_CHANGE_EVENT, sync);
+  }, []);
+
+  useEffect(() => {
+    if (!analyticsAllowed || injectedRef.current) return;
+    const markup = customScripts?.trim();
+    if (!markup) return;
+    injectedRef.current = true;
+    try {
+      injectCustomScripts(markup, nonce);
+    } catch (error) {
+      console.error('Failed to inject consented custom scripts:', error);
+    }
+  }, [analyticsAllowed, customScripts, nonce]);
+
+  if (!analyticsAllowed) return null;
+  if (!gtmId && !gaMeasurementId) return null;
+  return (
+    <>
+      {gtmId && <DeferredGoogleTagManager gtmId={gtmId} nonce={nonce} />}
+      {gaMeasurementId && (
+        <DeferredGoogleAnalytics gaId={gaMeasurementId} nonce={nonce} />
+      )}
+    </>
+  );
+}

package/templates/nextblock-template/components/renderers/CachedDynamicLayoutEngine.tsx

@@ -1,28 +1,28 @@
-import React from 'react';
-import { cacheLife, cacheTag } from 'next/cache';
-import {
-  DynamicLayoutEngine,
-  type DynamicLayoutEngineProps,
-  DYNAMIC_LAYOUT_ENGINE_CACHE_TAG,
-  getDynamicLayoutDefinitionCacheTag,
-} from './DynamicLayoutEngine';
-
-export async function CachedDynamicLayoutEngine(props: DynamicLayoutEngineProps) {
-  // 'use cache';
-  // cacheLife('minutes');
-  // cacheTag(DYNAMIC_LAYOUT_ENGINE_CACHE_TAG);
-
-  // for (const tag of props.cacheTags ?? []) {
-  //   cacheTag(tag);
-  // }
-
-  // if (props.definition?.id) {
-  //   cacheTag(getDynamicLayoutDefinitionCacheTag(props.definition.id));
-  // }
-
-  // if (props.definition?.slug) {
-  //   cacheTag(getDynamicLayoutDefinitionCacheTag(props.definition.slug));
-  // }
-
-  return <DynamicLayoutEngine {...props} />;
-}
+import React from 'react';
+import { cacheLife, cacheTag } from 'next/cache';
+import {
+  DynamicLayoutEngine,
+  type DynamicLayoutEngineProps,
+  DYNAMIC_LAYOUT_ENGINE_CACHE_TAG,
+  getDynamicLayoutDefinitionCacheTag,
+} from './DynamicLayoutEngine';
+
+export async function CachedDynamicLayoutEngine(props: DynamicLayoutEngineProps) {
+  // 'use cache';
+  // cacheLife('minutes');
+  // cacheTag(DYNAMIC_LAYOUT_ENGINE_CACHE_TAG);
+
+  // for (const tag of props.cacheTags ?? []) {
+  //   cacheTag(tag);
+  // }
+
+  // if (props.definition?.id) {
+  //   cacheTag(getDynamicLayoutDefinitionCacheTag(props.definition.id));
+  // }
+
+  // if (props.definition?.slug) {
+  //   cacheTag(getDynamicLayoutDefinitionCacheTag(props.definition.slug));
+  // }
+
+  return <DynamicLayoutEngine {...props} />;
+}

package/templates/nextblock-template/components/renderers/DynamicLayoutEngine.test.tsx

@@ -1,166 +1,166 @@
-import React from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
-import { describe, expect, it, vi } from 'vitest';
-import type { CustomBlockDefinition } from '@nextblock-cms/utils';
-
-import { DynamicLayoutEngine } from './DynamicLayoutEngine';
-
-const testimonialDefinition: Pick<
-  CustomBlockDefinition,
-  'fields' | 'id' | 'layout_schema' | 'name' | 'slug'
-> = {
-  fields: [
-    { key: 'quote', label: 'Quote', required: false, type: 'rich-text' },
-    { key: 'author_name', label: 'Author Name', required: false, type: 'text' },
-    { key: 'portrait', label: 'Portrait', required: false, type: 'image_r2' },
-    {
-      display_column: 'full_name',
-      key: 'customer',
-      label: 'Customer',
-      multiple: false,
-      required: false,
-      table: 'profiles',
-      type: 'db_relation',
-      value_column: 'id',
-    },
-  ],
-  id: '33333333-3333-4333-8333-333333333333',
-  layout_schema: {
-    as: 'article',
-    children: [
-      {
-        as: 'div',
-        children: [
-          {
-            as: 'div',
-            children: [
-              {
-                as: 'figure',
-                children: [
-                  {
-                    className: 'h-16 w-16 rounded-full object-cover',
-                    field_key: 'portrait',
-                    type: 'field_render',
-                  },
-                ],
-                className: 'flex justify-center',
-                type: 'container',
-              },
-              {
-                as: 'div',
-                children: [
-                  {
-                    as: 'blockquote',
-                    className: 'text-lg font-medium',
-                    field_key: 'quote',
-                    type: 'field_render',
-                  },
-                  {
-                    as: 'p',
-                    className: 'text-sm font-semibold',
-                    field_key: 'author_name',
-                    type: 'field_render',
-                  },
-                  {
-                    as: 'span',
-                    className: 'text-xs text-muted-foreground',
-                    field_key: 'customer',
-                    type: 'field_render',
-                  },
-                ],
-                className: 'flex flex-col gap-2',
-                type: 'container',
-              },
-            ],
-            className: 'grid gap-6 md:grid-cols-[auto_1fr]',
-            type: 'container',
-          },
-        ],
-        className: 'mx-auto max-w-3xl rounded-lg border p-6',
-        type: 'container',
-      },
-    ],
-    className: 'py-10',
-    type: 'container',
-  },
-  name: 'Nested Testimonial Card',
-  slug: 'nested-testimonial-card',
-};
-
-describe('DynamicLayoutEngine', () => {
-  it('renders an intricately nested layout schema into Tailwind structural markup', () => {
-    const html = renderToStaticMarkup(
-      <DynamicLayoutEngine
-        definition={testimonialDefinition}
-        data={{
-          author_name: 'Ada Lovelace',
-          customer: 'profile-1',
-          portrait: {
-            alt: 'Ada Lovelace portrait',
-            height: 128,
-            object_key: 'custom-blocks/testimonials/ada.webp',
-            url: '/custom-blocks/testimonials/ada.webp',
-            width: 128,
-          },
-          quote: '<p>Computation belongs in the imagination first.</p>',
-          resolved_relations: {
-            customer: {
-              record: {
-                full_name: 'Analytical Engine Society',
-                id: 'profile-1',
-              },
-              table: 'profiles',
-              value: 'profile-1',
-            },
-          },
-        }}
-      />
-    );
-
-    expect(html).toContain('py-10');
-    expect(html).toContain('mx-auto max-w-3xl rounded-lg border p-6');
-    expect(html).toContain('grid gap-6 md:grid-cols-[auto_1fr]');
-    expect(html).toContain('src="/custom-blocks/testimonials/ada.webp"');
-    expect(html).toContain('alt="Ada Lovelace portrait"');
-    expect(html).toContain('Computation belongs in the imagination first.');
-    expect(html).toContain('Ada Lovelace');
-    expect(html).toContain('Analytical Engine Society');
-  });
-
-  it('fails softly on corrupted layout nodes', () => {
-    const warnSpy = vi.spyOn(console, 'error').mockImplementation(() => undefined);
-    const cyclicNode: any = {
-      children: [],
-      type: 'container',
-    };
-    cyclicNode.children.push(cyclicNode);
-
-    const html = renderToStaticMarkup(
-      <DynamicLayoutEngine
-        fields={testimonialDefinition.fields}
-        layoutSchema={cyclicNode}
-        maxDepth={8}
-      />
-    );
-
-    expect(html).toContain('data-dynamic-layout-warning');
-    expect(html).toContain('cycle detected');
-    expect(warnSpy).not.toHaveBeenCalled();
-    warnSpy.mockRestore();
-  });
-
-  it('warns instead of throwing when a field_render references a missing field', () => {
-    const html = renderToStaticMarkup(
-      <DynamicLayoutEngine
-        fields={testimonialDefinition.fields}
-        layoutSchema={{
-          field_key: 'missing_field',
-          type: 'field_render',
-        }}
-      />
-    );
-
-    expect(html).toContain('data-dynamic-layout-warning');
-    expect(html).toContain('Unknown field');
-  });
-});
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it, vi } from 'vitest';
+import type { CustomBlockDefinition } from '@nextblock-cms/utils';
+
+import { DynamicLayoutEngine } from './DynamicLayoutEngine';
+
+const testimonialDefinition: Pick<
+  CustomBlockDefinition,
+  'fields' | 'id' | 'layout_schema' | 'name' | 'slug'
+> = {
+  fields: [
+    { key: 'quote', label: 'Quote', required: false, type: 'rich-text' },
+    { key: 'author_name', label: 'Author Name', required: false, type: 'text' },
+    { key: 'portrait', label: 'Portrait', required: false, type: 'image_r2' },
+    {
+      display_column: 'full_name',
+      key: 'customer',
+      label: 'Customer',
+      multiple: false,
+      required: false,
+      table: 'profiles',
+      type: 'db_relation',
+      value_column: 'id',
+    },
+  ],
+  id: '33333333-3333-4333-8333-333333333333',
+  layout_schema: {
+    as: 'article',
+    children: [
+      {
+        as: 'div',
+        children: [
+          {
+            as: 'div',
+            children: [
+              {
+                as: 'figure',
+                children: [
+                  {
+                    className: 'h-16 w-16 rounded-full object-cover',
+                    field_key: 'portrait',
+                    type: 'field_render',
+                  },
+                ],
+                className: 'flex justify-center',
+                type: 'container',
+              },
+              {
+                as: 'div',
+                children: [
+                  {
+                    as: 'blockquote',
+                    className: 'text-lg font-medium',
+                    field_key: 'quote',
+                    type: 'field_render',
+                  },
+                  {
+                    as: 'p',
+                    className: 'text-sm font-semibold',
+                    field_key: 'author_name',
+                    type: 'field_render',
+                  },
+                  {
+                    as: 'span',
+                    className: 'text-xs text-muted-foreground',
+                    field_key: 'customer',
+                    type: 'field_render',
+                  },
+                ],
+                className: 'flex flex-col gap-2',
+                type: 'container',
+              },
+            ],
+            className: 'grid gap-6 md:grid-cols-[auto_1fr]',
+            type: 'container',
+          },
+        ],
+        className: 'mx-auto max-w-3xl rounded-lg border p-6',
+        type: 'container',
+      },
+    ],
+    className: 'py-10',
+    type: 'container',
+  },
+  name: 'Nested Testimonial Card',
+  slug: 'nested-testimonial-card',
+};
+
+describe('DynamicLayoutEngine', () => {
+  it('renders an intricately nested layout schema into Tailwind structural markup', () => {
+    const html = renderToStaticMarkup(
+      <DynamicLayoutEngine
+        definition={testimonialDefinition}
+        data={{
+          author_name: 'Ada Lovelace',
+          customer: 'profile-1',
+          portrait: {
+            alt: 'Ada Lovelace portrait',
+            height: 128,
+            object_key: 'custom-blocks/testimonials/ada.webp',
+            url: '/custom-blocks/testimonials/ada.webp',
+            width: 128,
+          },
+          quote: '<p>Computation belongs in the imagination first.</p>',
+          resolved_relations: {
+            customer: {
+              record: {
+                full_name: 'Analytical Engine Society',
+                id: 'profile-1',
+              },
+              table: 'profiles',
+              value: 'profile-1',
+            },
+          },
+        }}
+      />
+    );
+
+    expect(html).toContain('py-10');
+    expect(html).toContain('mx-auto max-w-3xl rounded-lg border p-6');
+    expect(html).toContain('grid gap-6 md:grid-cols-[auto_1fr]');
+    expect(html).toContain('src="/custom-blocks/testimonials/ada.webp"');
+    expect(html).toContain('alt="Ada Lovelace portrait"');
+    expect(html).toContain('Computation belongs in the imagination first.');
+    expect(html).toContain('Ada Lovelace');
+    expect(html).toContain('Analytical Engine Society');
+  });
+
+  it('fails softly on corrupted layout nodes', () => {
+    const warnSpy = vi.spyOn(console, 'error').mockImplementation(() => undefined);
+    const cyclicNode: any = {
+      children: [],
+      type: 'container',
+    };
+    cyclicNode.children.push(cyclicNode);
+
+    const html = renderToStaticMarkup(
+      <DynamicLayoutEngine
+        fields={testimonialDefinition.fields}
+        layoutSchema={cyclicNode}
+        maxDepth={8}
+      />
+    );
+
+    expect(html).toContain('data-dynamic-layout-warning');
+    expect(html).toContain('cycle detected');
+    expect(warnSpy).not.toHaveBeenCalled();
+    warnSpy.mockRestore();
+  });
+
+  it('warns instead of throwing when a field_render references a missing field', () => {
+    const html = renderToStaticMarkup(
+      <DynamicLayoutEngine
+        fields={testimonialDefinition.fields}
+        layoutSchema={{
+          field_key: 'missing_field',
+          type: 'field_render',
+        }}
+      />
+    );
+
+    expect(html).toContain('data-dynamic-layout-warning');
+    expect(html).toContain('Unknown field');
+  });
+});