@malloydata/render 0.0.202-dev241013162457 → 0.0.202-dev241018164632

package/.storybook/main.ts

@@ -1,6 +1,10 @@
 import {join, dirname} from 'path';
 import {mergeConfig, InlineConfig} from 'vite';
 import {StorybookConfig} from '@storybook/html-vite';
+import {
+  malloyStoriesIndexer,
+  viteMalloyStoriesPlugin,
+} from './malloy-stories-indexer';
 
 /**
  * This function is used to resolve the absolute path of a package.
@@ -13,21 +17,28 @@ function getAbsolutePath(value) {
 const config: StorybookConfig = {
   'stories': [
     '../src/stories/*.mdx',
+    '../src/**/*.stories.malloy',
     '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
+  experimental_indexers: async existingIndexers => [
+    ...(existingIndexers ?? []),
+    malloyStoriesIndexer,
+  ],
   staticDirs: ['../src/stories/static'],
   'addons': [
     getAbsolutePath('@storybook/addon-links'),
     getAbsolutePath('@storybook/addon-essentials'),
     getAbsolutePath('@storybook/addon-interactions'),
   ],
+  core: {
+    builder: '@storybook/builder-vite',
+    disableTelemetry: true,
+  },
   'framework': {
     'name': '@storybook/html-vite',
     'options': {},
   },
-  'docs': {
-    'autodocs': 'tag',
-  },
+  'docs': {},
   async viteFinal(config, {configType}) {
     if (configType === 'DEVELOPMENT') {
       // Your development configuration goes here
@@ -54,6 +65,7 @@ const config: StorybookConfig = {
         'process.env': {},
       },
       assetsInclude: ['/sb-preview/runtime.js'],
+      plugins: [viteMalloyStoriesPlugin()],
     };
     const finalConfig = mergeConfig(config, configOverride);
     return finalConfig;

package/.storybook/malloy-stories-indexer.ts

@@ -0,0 +1,172 @@
+import path from 'path';
+import {PluginOption} from 'vite';
+import type {IndexInput, Indexer} from '@storybook/types';
+import fs from 'fs';
+import {DuckDBConnection} from '@malloydata/db-duckdb';
+import {Model, SingleConnectionRuntime, URLReader} from '@malloydata/malloy';
+
+const STORY_MODEL_PREFIX = /##\(story\)\s/;
+const STORY_PREFIX = /#\(story\)\s/;
+
+async function createConnection() {
+  // TODO: figure out how to get duckdb.table to load based on taht path, rather than from workingDirectory. so that malloy story files can be anywhere
+  const workingDirectory = path.join(__dirname, '../src/stories');
+  const connection = new DuckDBConnection(
+    'duckdb',
+    undefined,
+    workingDirectory,
+    {
+      rowLimit: 1000,
+    }
+  );
+  await connection.connecting;
+  return connection;
+}
+
+async function getMaterializedModel(fileName: string) {
+  const connection = await createConnection();
+  const modelCode = fs.readFileSync(fileName, 'utf-8');
+  const runtime = new SingleConnectionRuntime(connection);
+  const model = runtime.loadModel(modelCode);
+
+  const materializedModel = await model.getModel();
+  return materializedModel;
+}
+
+type ModelIndexInput = IndexInput & {
+  sourceName: string;
+  queryName: string;
+};
+
+function fileNameToComponentName(fileName: string) {
+  const regex = /\/([^\/]+)\.stories\.malloy$/;
+  const match = fileName.match(regex);
+  const name = match && match[1];
+  if (name) {
+    return name
+      .split(/[-_]/)
+      .map(part => {
+        return part.charAt(0).toUpperCase() + part.slice(1);
+      })
+      .join(' ');
+  }
+}
+
+function getModelStories(materializedModel: Model, fileName: string) {
+  const models = materializedModel.explores;
+  let modelStories: ModelIndexInput[] = [];
+
+  const isLegacy = materializedModel.tagParse().tag.has('renderer_legacy');
+  const componentName =
+    materializedModel
+      .tagParse({prefix: STORY_MODEL_PREFIX})
+      .tag.text('component') ?? fileNameToComponentName(fileName);
+
+  models.forEach(model => {
+    model.allFields
+      .filter(f => f.isQueryField() && f.getTaglines(STORY_PREFIX).length > 0)
+      .forEach(query => {
+        modelStories.push({
+          type: 'story',
+          importPath: fileName,
+          title: `Malloy ${isLegacy ? 'Legacy' : 'Next'}/${componentName}`,
+          exportName: query.name,
+          name: query.tagParse({prefix: STORY_PREFIX}).tag.text('story'),
+          sourceName: model.name,
+          queryName: query.name,
+        });
+      });
+  });
+  return {
+    componentName,
+    isLegacy,
+    stories: modelStories,
+  };
+}
+
+export const malloyStoriesIndexer: Indexer = {
+  test: /stories\.malloy$/,
+  createIndex: async fileName => {
+    const connection = await createConnection();
+    const modelCode = fs.readFileSync(fileName, 'utf-8');
+    const urlReader: URLReader = {
+      async readURL(url) {
+        const pathToUrl = path.join(fileName, '..', url.href);
+        const contents = fs.readFileSync(pathToUrl, 'utf-8');
+        return contents;
+      },
+    };
+    const runtime = new SingleConnectionRuntime(urlReader, connection);
+    const model = runtime.loadModel(modelCode);
+    const materializedModel = await model.getModel();
+    const modelStories = getModelStories(materializedModel, fileName).stories;
+    return modelStories;
+  },
+};
+
+export function viteMalloyStoriesPlugin(): PluginOption {
+  return {
+    name: 'vite-plugin-storybook-malloy-stories',
+    async transform(code, id) {
+      if (id.endsWith('.stories.malloy')) {
+        const model = await getMaterializedModel(id);
+        const modelStoriesMeta = getModelStories(model, id);
+
+        const storyExports = modelStoriesMeta.stories
+          .map(
+            meta => `
+          export const ${meta.exportName} = {
+            args: {
+              source: '${meta.sourceName}',
+              view: '${meta.queryName}',
+            },
+          };
+          `
+          )
+          .join('\n');
+
+        const header = modelStoriesMeta.isLegacy
+          ? `
+          import script from '${id}?raw';
+          import {renderMalloyLegacy} from './util';
+
+          export default {
+            title: 'Malloy Legacy/Basic',
+            render: ({source, view}, {globals: {getConnection}}) => {
+              return renderMalloyLegacy({script, source, view, connection: getConnection()});
+            },
+            argTypes: {},
+          };`
+          : `
+          import script from '${id}?raw';
+          import {createLoader} from './util';
+          import './themes.css';
+          import '../component/render-webcomponent';
+
+          const meta = {
+            title: "Malloy Next/${modelStoriesMeta.componentName}",
+            render: ({classes}, context) => {
+              const parent = document.createElement('div');
+              parent.style.height = 'calc(100vh - 40px)';
+              parent.style.position = 'relative';
+              const el = document.createElement('malloy-render');
+              if (classes) el.classList.add(classes);
+              el.result = context.loaded['result'];
+              parent.appendChild(el);
+              return parent;
+            },
+            loaders: [createLoader(script)],
+            argTypes: {},
+          };
+          export default meta;
+          `;
+
+        const generatedCode = `
+        ${header}
+        ${storyExports}
+      `;
+        return generatedCode;
+      }
+    },
+  };
+}

package/.storybook/preview.ts

@@ -3,7 +3,9 @@ import {Preview} from '@storybook/html';
 import registeredData from './registered_data.json';
 import theme from './theme';
 
+let memoConnection: DuckDBWASMConnection | null = null;
 async function createConnection() {
+  if (memoConnection) return memoConnection;
   const connection = new DuckDBWASMConnection('duckdb', null, undefined, {
     rowLimit: 1000,
   });
@@ -15,12 +17,15 @@ async function createConnection() {
       new window.URL(fullTableName, window.location.href).toString()
     );
   }
+  memoConnection = connection;
   return connection;
 }
 
 const preview: Preview = {
   parameters: {
-    actions: {argTypesRegex: '^on[A-Z].*'},
+    actions: {
+      // argTypesRegex: '^on[A-Z].*'
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -31,8 +36,10 @@ const preview: Preview = {
       theme,
     },
   },
-  globals: {
-    connection: createConnection(),
+  initialGlobals: {
+    // Doing this with a lazy callback in the context because otherwise
+    // Storybook was providing an empty Promise on first render when trying to directly createConnection here
+    getConnection: () => createConnection(),
   },
 };