feat(PrismCode): react renderer * 13

Author: tenphi

.size-limit.cjs

@@ -20,7 +20,7 @@ module.exports = [
         }),
       );
     },
-    limit: '251kB',
+    limit: '258kB',
   },
   {
     name: 'Tree shaking (just a Button)',

src/_internal/hooks/use-event.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useCallback } from 'react';
 
 import { useSyncRef } from './use-sync-ref';

src/_internal/hooks/use-update-effect.ts

@@ -9,6 +9,5 @@ export function useUpdateEffect(effect: EffectCallback, deps?: DependencyList) {
     if (!isFirst) {
       return effect();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
 }

src/components/content/PrismCode/PrismCode.stories.tsx

@@ -12,24 +12,29 @@ export default {
   },
 };
 
-const Template = ({ ...args }) => <PrismCode {...args} />;
+const Template = (args: any) => <PrismCode {...args} />;
 
-export const OneLine = Template.bind({});
-OneLine.args = {
-  language: 'bash',
-  code: '$ npm install -g cubejs-cli',
+export const OneLine = {
+  render: Template,
+  args: {
+    language: 'bash',
+    code: '$ npm install -g cubejs-cli',
+  },
 };
 
-export const MultiLine = Template.bind({});
-MultiLine.args = {
-  language: 'bash',
-  code: '$ npm install -g cubejs-cli\n$ cubejs deploy',
+export const MultiLine = {
+  render: Template,
+  args: {
+    language: 'bash',
+    code: '$ npm install -g cubejs-cli\n$ cubejs deploy',
+  },
 };
 
-export const JavascriptSyntax = Template.bind({});
-JavascriptSyntax.args = {
-  language: 'javascript',
-  code: `cube('LineItems', {
+export const JavascriptSyntax = {
+  render: Template,
+  args: {
+    language: 'javascript',
+    code: `cube('LineItems', {
   sql: \`SELECT * FROM public.line_items\`,
 
 
@@ -75,12 +80,14 @@ JavascriptSyntax.args = {
     }
   }
 });`,
+  },
 };
 
-export const YamlSyntax = Template.bind({});
-YamlSyntax.args = {
-  language: 'yaml',
-  code: `cubes:
+export const YamlSyntax = {
+  render: Template,
+  args: {
+    language: 'yaml',
+    code: `cubes:
   # Define the Orders cube
   - name: Orders
     sql: SELECT * FROM public.orders
@@ -138,12 +145,14 @@ YamlSyntax.args = {
       - cube: Orders
         sql: \${Customers.id} = \${Orders.customer_id}
         relationship: one_to_many # One customer can have many orders`,
+  },
 };
 
-export const SqlSyntax = Template.bind({});
-SqlSyntax.args = {
-  language: 'sql',
-  code: `WITH RecursiveCTE AS (
+export const SqlSyntax = {
+  render: Template,
+  args: {
+    language: 'sql',
+    code: `WITH RecursiveCTE AS (
     -- Recursive CTE to generate a sequence of numbers
     SELECT 1 AS Level, CAST('2025-01-01' AS DATE) AS GeneratedDate
     UNION ALL
@@ -196,13 +205,16 @@ SELECT
     fo.GeneratedDate
 FROM FinalOutput fo
 ORDER BY fo.GeneratedDate, fo.UserID;`,
+  },
 };
 
-export const DiffSyntax = Template.bind({});
-DiffSyntax.args = {
-  language: 'javascript',
-  code: `  console.log('Hello, world!');
+export const DiffSyntax = {
+  render: Template,
+  args: {
+    language: 'javascript',
+    code: `  console.log('Hello, world!');
 + console.log('This line was added!');
   console.log('Another unchanged line');
 - console.log('This line was removed.');`,
+  },
 };

src/components/content/PrismCode/__tests__/diffHighlight.test.ts

@@ -221,4 +221,44 @@ describe('Prism diff-highlight plugin', () => {
 
     expect(hasNestedSql).toBe(true);
   });
+
+  test('YAML grammar supports SQL highlighting in sql fields', () => {
+    const yamlCode = `cubes:
+  - name: orders
+    sql: SELECT id, name FROM orders WHERE active = 1
+    measures:
+      - name: count
+        sql: COUNT(*)`;
+
+    const tokens = Prism.tokenize(yamlCode, Prism.languages.yaml, 'yaml');
+
+    // Check if SQL tokens are present
+    const hasKeywords = JSON.stringify(tokens).includes('"keyword"');
+    const hasSqlKeywords =
+      JSON.stringify(tokens).includes('SELECT') ||
+      JSON.stringify(tokens).includes('COUNT');
+
+    expect(hasKeywords).toBe(true);
+    expect(hasSqlKeywords).toBe(true);
+  });
+
+  test('YAML grammar supports SQL highlighting in multiline folded blocks', () => {
+    const yamlCode = `cubes:
+  - name: orders
+    sql: >
+      SELECT 1 as id, 100 as amount, 'new' status
+      UNION ALL
+      SELECT 2 as id, 200 as amount, 'new' status`;
+
+    const tokens = Prism.tokenize(yamlCode, Prism.languages.yaml, 'yaml');
+
+    // Check if SQL tokens are present in the multiline block
+    const hasKeywords = JSON.stringify(tokens).includes('"keyword"');
+    const hasSqlKeywords =
+      JSON.stringify(tokens).includes('SELECT') ||
+      JSON.stringify(tokens).includes('UNION');
+
+    expect(hasKeywords).toBe(true);
+    expect(hasSqlKeywords).toBe(true);
+  });
 });

src/components/content/PrismCode/prismSetup.tsx

@@ -219,4 +219,48 @@ RendererPrism.languages.sql = {
   });
 })(RendererPrism);
 
+// Extend YAML to support SQL syntax highlighting in sql: fields
+(function (Prism) {
+  if (Prism.languages.yaml && Prism.languages.sql) {
+    // Insert SQL patterns before existing YAML patterns for higher priority
+    Prism.languages.insertBefore('yaml', 'key', {
+      'sql-inline': {
+        pattern: /((?:^|\n)\s*sql\s*:\s*)([^\n\r|>]+)/,
+        lookbehind: true,
+        inside: Prism.languages.sql,
+      },
+    });
+
+    // Handle multiline SQL blocks with proper indentation
+    Prism.languages.insertBefore('yaml', 'key', {
+      'sql-multiline': {
+        pattern:
+          /((?:^|\n)\s*sql\s*:\s*[|>][-+]?\s*\n)((?:\s{2,}[^\n\r]+(?:\n|$))+)/,
+        lookbehind: true,
+        inside: {
+          'sql-content': {
+            pattern: /^(\s+)(.+)/gm,
+            inside: {
+              indent: /^\s+/,
+              'sql-code': {
+                pattern: /.+/,
+                inside: Prism.languages.sql,
+              },
+            },
+          },
+        },
+      },
+    });
+
+    // Handle YAML scalar content that follows sql: > or sql: | indicators
+    Prism.languages.insertBefore('yaml', 'scalar', {
+      'sql-scalar': {
+        pattern:
+          /^\s*(SELECT|INSERT|UPDATE|DELETE|WITH|CREATE|DROP|ALTER|UNION|FROM|WHERE|JOIN|GROUP|ORDER|HAVING)[\s\S]*$/im,
+        inside: Prism.languages.sql,
+      },
+    });
+  }
+})(RendererPrism);
+
 export { RendererPrism as Prism };

src/components/content/PrismDiffCode/PrismDiffCode.stories.tsx

@@ -2,6 +2,8 @@ import { baseProps } from '../../../stories/lists/baseProps';
 
 import { PrismDiffCode } from './PrismDiffCode';
 
+import type { CubePrismDiffCodeProps } from './PrismDiffCode';
+
 export default {
   title: 'Content/PrismDiffCode',
   component: PrismDiffCode,
@@ -12,18 +14,19 @@ export default {
   },
 };
 
-const Template = ({ ...args }) => <PrismDiffCode {...args} />;
+const Template = (args: CubePrismDiffCodeProps) => <PrismDiffCode {...args} />;
 
 // export const JavascriptSyntax = Template.bind({});
 // JavascriptSyntax.args = {
 //   language: 'javascript',
 //   code: ``,
 // };
 
-export const YamlSyntax = Template.bind({});
-YamlSyntax.args = {
-  language: 'yaml',
-  original: `cubes:
+export const YamlSyntax = {
+  render: Template,
+  args: {
+    language: 'yaml',
+    original: `cubes:
   # Define the Orders cube
   - name: Orders
     sql: SELECT * FROM public.orders
@@ -81,7 +84,7 @@ YamlSyntax.args = {
       - cube: Orders
         sql: \${Customers.id} = \${Orders.customer_id}
         relationship: one_to_many # One customer can have many orders`,
-  modified: `cubes:
+    modified: `cubes:
   # Define the Orders cube
   - name: Orders
     sql: SELECT * FROM public.orders
@@ -144,12 +147,14 @@ YamlSyntax.args = {
       - cube: Orders
         sql: \${Customers.id} = \${Orders.customer_id}
         relationship: one_to_many # One customer can have multiple orders`,
+  },
 };
 
-export const SqlSyntax = Template.bind({});
-SqlSyntax.args = {
-  language: 'sql',
-  original: `WITH RecursiveCTE AS (
+export const SqlSyntax = {
+  render: Template,
+  args: {
+    language: 'sql',
+    original: `WITH RecursiveCTE AS (
     -- Recursive CTE to generate a sequence of numbers
     SELECT 1 AS Level, CAST('2025-01-01' AS DATE) AS GeneratedDate
     UNION ALL
@@ -202,7 +207,7 @@ SELECT
     fo.GeneratedDate
 FROM FinalOutput fo
 ORDER BY fo.GeneratedDate, fo.UserID;`,
-  modified: `WITH RecursiveDates AS (
+    modified: `WITH RecursiveDates AS (
     -- Generate a sequence of dates starting from 2025-01-01
     SELECT 1 AS DayNumber, CAST('2025-01-01' AS DATE) AS GeneratedDate
     UNION ALL
@@ -253,13 +258,16 @@ SELECT
     fo.GeneratedDate
 FROM FinalOutput fo
 ORDER BY fo.GeneratedDate, fo.UserID;`,
+  },
 };
 
-export const EmptyLineDiff = Template.bind({});
-EmptyLineDiff.args = {
-  modified:
-    "cubes:\n  - name: orders\n    sql: >\n      select 1 as id, 100 as amount, 'new' status\n      UNION ALL\n      select 2 as id, 200 as amount, 'new' status\n      UNION ALL\n      select 3 as id, 300 as amount, 'processed' status\n      UNION ALL\n      select 4 as id, 500 as amount, 'processed' status\n      UNION ALL\n      select 5 as id, 600 as amount, 'shipped' status\n\n    joins: []\n\n    dimensions:\n      - name: id\n        type: number\n\n      - name: status\n        sql: status\n\n\n    measures:\n      - name: count\n        type: count\n\n      - name: amount\n        sql: amount\n        type: sum\n\n    pre_aggregations:\n      # Pre-aggregation definitions go here.\n      # Learn more in the documentation: https://cube.dev/docs/caching/pre-aggregations/getting-started\n\n",
-  original:
-    "cubes:\n  - name: orders\n    sql: >\n      select 1 as id, 100 as amount, 'new' status\n      UNION ALL\n      select 2 as id, 200 as amount, 'new' status\n      UNION ALL\n      select 3 as id, 300 as amount, 'processed' status\n      UNION ALL\n      select 4 as id, 500 as amount, 'processed' status\n      UNION ALL\n      select 5 as id, 600 as amount, 'shipped' status\n\n    joins: []\n\n    dimensions:\n      - name: id\n\n      - name: status\n        sql: status\n\n\n    measures:\n      - name: count\n        type: count\n\n      - name: amount\n        sql: amount\n        type: sum\n\n    pre_aggregations:\n      # Pre-aggregation definitions go here.\n      # Learn more in the documentation: https://cube.dev/docs/caching/pre-aggregations/getting-started\n\n",
-  language: 'yaml',
+export const EmptyLineDiff = {
+  render: Template,
+  args: {
+    modified:
+      "cubes:\n  - name: orders\n    sql: >\n      select 1 as id, 100 as amount, 'new' status\n      UNION ALL\n      select 2 as id, 200 as amount, 'new' status\n      UNION ALL\n      select 3 as id, 300 as amount, 'processed' status\n      UNION ALL\n      select 4 as id, 500 as amount, 'processed' status\n      UNION ALL\n      select 5 as id, 600 as amount, 'shipped' status\n\n    joins: []\n\n    dimensions:\n      - name: id\n        type: number\n\n      - name: status\n        sql: status\n\n\n    measures:\n      - name: count\n        type: count\n\n      - name: amount\n        sql: amount\n        type: sum\n\n    pre_aggregations:\n      # Pre-aggregation definitions go here.\n      # Learn more in the documentation: https://cube.dev/docs/caching/pre-aggregations/getting-started\n\n",
+    original:
+      "cubes:\n  - name: orders\n    sql: >\n      select 1 as id, 100 as amount, 'new' status\n      UNION ALL\n      select 2 as id, 200 as amount, 'new' status\n      UNION ALL\n      select 3 as id, 300 as amount, 'processed' status\n      UNION ALL\n      select 4 as id, 500 as amount, 'processed' status\n      UNION ALL\n      select 5 as id, 600 as amount, 'shipped' status\n\n    joins: []\n\n    dimensions:\n      - name: id\n\n      - name: status\n        sql: status\n\n\n    measures:\n      - name: count\n        type: count\n\n      - name: amount\n        sql: amount\n        type: sum\n\n    pre_aggregations:\n      # Pre-aggregation definitions go here.\n      # Learn more in the documentation: https://cube.dev/docs/caching/pre-aggregations/getting-started\n\n",
+    language: 'yaml',
+  },
 };

src/components/overlays/NewNotifications/Notification.tsx

@@ -12,7 +12,7 @@ export type NotificationProps = {
    *
    * @default false
    */
-  // eslint-disable-next-line react/boolean-prop-naming
+
   disableRemoveOnUnmount?: boolean;
 } & CubeNotifyApiProps;
 
@@ -35,7 +35,6 @@ export function Notification(props: NotificationProps) {
   useEffect(() => {
     notify({ id, ...props });
     // We can safety ignore props, bc we update notification in the another effect, this effect only mounts a notification.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id]);
   useEffect(() => () => removeNotification(id), [id, removeNotification]);
   useEffect(() => update(id, props));

src/tasty/utils/dotize.ts

@@ -1,4 +1,3 @@
-/* eslint-disable */
 // @ts-nocheck
 // Convert complex js object to dot notation js object
 // url: https://github.com/vardars/dotize

src/tasty/utils/styles.test.ts

@@ -10,7 +10,6 @@ describe('applyStates', () => {
   function checkAppliance(list) {
     list.forEach((obj, i) => {
       it(`to list ${i}`, () => {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         expect(applyStates(...obj.input)).toEqual(obj.output);
       });