@malloydata/render 0.0.101-dev231114015212 → 0.0.101

package/.storybook/main.ts

@@ -43,6 +43,10 @@ const config: StorybookConfig = {
           ),
         },
       },
+      server: {
+        // Disable HMR for now, as we can't seem to get malloy core nor Lit to fully support it
+        hmr: false,
+      },
       define: {
         'process.env': {},
       },

package/dist/component/render.d.ts

@@ -0,0 +1,13 @@
+import { Result } from '@malloydata/malloy';
+import { LitElement } from 'lit';
+import './table';
+export declare class MalloyRender extends LitElement {
+    static styles: import("lit").CSSResult;
+    result: Result;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'malloy-render': MalloyRender;
+    }
+}

package/dist/component/render.js

@@ -0,0 +1,39 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MalloyRender = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+require("./table");
+let MalloyRender = exports.MalloyRender = class MalloyRender extends lit_1.LitElement {
+    render() {
+        return (0, lit_1.html) `<malloy-table .data=${this.result.data}></malloy-table>`;
+    }
+};
+MalloyRender.styles = (0, lit_1.css) `
+    :host {
+      --table-font-size: 12px;
+      --table-row-height: 36px;
+      --table-header-color: #5d626b;
+      --table-header-weight: bold;
+      --table-body-color: #727883;
+      --table-body-weight: 400;
+      --table-border: 1px solid #e5e7eb;
+      --table-background: white;
+
+      font-family: Inter, system-ui, sans-serif;
+      font-size: var(--table-font-size);
+    }
+  `;
+__decorate([
+    (0, decorators_js_1.property)({ attribute: false })
+], MalloyRender.prototype, "result", void 0);
+exports.MalloyRender = MalloyRender = __decorate([
+    (0, decorators_js_1.customElement)('malloy-render')
+], MalloyRender);
+//# sourceMappingURL=render.js.map

package/dist/component/table.d.ts

@@ -0,0 +1,12 @@
+import { DataArray } from '@malloydata/malloy';
+import { LitElement } from 'lit';
+export declare class Table extends LitElement {
+    static styles: import("lit").CSSResult;
+    data: DataArray;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'malloy-table': Table;
+    }
+}

package/dist/component/table.js

@@ -0,0 +1,70 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Table = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+let Table = exports.Table = class Table extends lit_1.LitElement {
+    render() {
+        const fields = this.data.field.allFields;
+        const headers = fields.map(f => (0, lit_1.html) `<th class="column-cell">${f.name}</th>`);
+        const rows = Array.from(this.data, row => (0, lit_1.html) `<tr>
+          ${fields.map(f => (0, lit_1.html) `<td class="column-cell">${row.cell(f).value}</td>`)}
+        </tr>`);
+        return (0, lit_1.html) `<table>
+      <thead>
+        ${headers}
+      </thead>
+      <tbody>
+        ${rows}
+      </tbody>
+    </table>`;
+    }
+};
+Table.styles = (0, lit_1.css) `
+    table {
+      border-collapse: collapse;
+      background: var(--table-background);
+    }
+
+    .column-cell {
+      height: var(--table-row-height);
+      border-block: var(--table-border);
+      overflow: hidden;
+      white-space: nowrap;
+      text-align: left;
+      padding: 0px 15px;
+      font-variant-numeric: tabular-nums;
+    }
+
+    th.column-cell {
+      font-weight: var(--table-header-weight);
+      color: var(--table-header-color);
+    }
+
+    td.column-cell {
+      font-weight: var(--table-body-weight);
+      color: var(--table-body-color);
+    }
+
+    th.column-cell:first-child,
+    td.column-cell:first-child {
+      padding-left: 0px;
+    }
+    th.column-cell:last-child,
+    td.column-cell:last-child {
+      padding-right: 0px;
+    }
+  `;
+__decorate([
+    (0, decorators_js_1.property)({ attribute: false })
+], Table.prototype, "data", void 0);
+exports.Table = Table = __decorate([
+    (0, decorators_js_1.customElement)('malloy-table')
+], Table);
+//# sourceMappingURL=table.js.map

package/dist/html/html_view.d.ts

@@ -2,6 +2,7 @@ import { DataArray, Explore, Field, Result, Tag } from '@malloydata/malloy';
 import { StyleDefaults } from '../data_styles';
 import { Renderer } from '../renderer';
 import { RendererOptions } from '../renderer_types';
+import '../component/render';
 export declare class HTMLView {
     private document;
     constructor(document: Document);

package/dist/html/html_view.js

@@ -31,11 +31,18 @@ const container_1 = require("./container");
 const utils_1 = require("./utils");
 const main_renderer_factory_1 = require("../main_renderer_factory");
 const list_1 = require("./list");
+require("../component/render");
 class HTMLView {
     constructor(document) {
         this.document = document;
     }
     async render(result, options) {
+        const isNextRenderer = result.resultExplore.modelTag.has('renderer_next');
+        if (isNextRenderer) {
+            const el = this.document.createElement('malloy-render');
+            el.result = result;
+            return el;
+        }
         const table = result.data;
         const renderer = makeRenderer(table.field, this.document, options, {
             size: 'large',

package/dist/stories/basic.stories.js

@@ -5,11 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlattenNestedMeasures = exports.ProductsBar = exports.ProductsTable = void 0;
 const basic_malloy_raw_1 = __importDefault(require("./static/basic.malloy?raw"));
-const render_malloy_1 = require("./render-malloy");
+const render_malloy_legacy_1 = require("./render-malloy-legacy");
 exports.default = {
-    title: 'Malloy/Basic',
+    title: 'Malloy Legacy/Basic',
     render: ({ source, view }, { globals: { connection } }) => {
-        return (0, render_malloy_1.renderMalloy)({ script: basic_malloy_raw_1.default, source, view, connection });
+        return (0, render_malloy_legacy_1.renderMalloy)({ script: basic_malloy_raw_1.default, source, view, connection });
     },
     argTypes: {},
 };

package/dist/stories/image.stories.js

@@ -5,11 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageAltFromGrandparent = exports.ImageAltFromParent = exports.ImageAltFromRecord = void 0;
 const image_malloy_raw_1 = __importDefault(require("./static/image.malloy?raw"));
-const render_malloy_1 = require("./render-malloy");
+const render_malloy_legacy_1 = require("./render-malloy-legacy");
 exports.default = {
-    title: 'Malloy/Image',
+    title: 'Malloy Legacy/Image',
     render: ({ source, view }, { globals: { connection } }) => {
-        return (0, render_malloy_1.renderMalloy)({ script: image_malloy_raw_1.default, source, view, connection });
+        return (0, render_malloy_legacy_1.renderMalloy)({ script: image_malloy_raw_1.default, source, view, connection });
     },
     argTypes: {},
 };

package/dist/stories/render-malloy-legacy.d.ts

@@ -0,0 +1,6 @@
+import { QueryOptions } from './util';
+type RenderOptions = QueryOptions & {
+    classes?: '';
+};
+export declare function renderMalloy(options: RenderOptions): HTMLDivElement;
+export {};

package/dist/stories/render-malloy-legacy.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderMalloy = void 0;
+const html_1 = require("../html");
+const util_1 = require("./util");
+async function runAndRender({ script, source, view, connection }, options = { dataStyles: {} }) {
+    const viewer = new html_1.HTMLView(document);
+    const result = await (0, util_1.runQuery)({ script, source, view, connection });
+    return await viewer.render(result, options);
+}
+function renderMalloy(options) {
+    const div = document.createElement('div');
+    runAndRender(options, {
+        dataStyles: {},
+    }).then(el => {
+        if (options.classes)
+            el.classList.add(options.classes);
+        div.replaceChildren(el);
+    });
+    return div;
+}
+exports.renderMalloy = renderMalloy;
+//# sourceMappingURL=render-malloy-legacy.js.map

package/dist/stories/tables.stories.d.ts

@@ -0,0 +1,24 @@
+import { Meta } from '@storybook/html';
+import './themes.css';
+import '../component/render';
+declare const meta: Meta;
+export default meta;
+export declare const ProductsTable: {
+    args: {
+        source: string;
+        view: string;
+    };
+};
+export declare const ProductsTableCustomTheme: {
+    args: {
+        source: string;
+        view: string;
+        classes: string;
+    };
+};
+export declare const Products2Column: {
+    args: {
+        source: string;
+        view: string;
+    };
+};

package/dist/stories/tables.stories.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Products2Column = exports.ProductsTableCustomTheme = exports.ProductsTable = void 0;
+const tables_malloy_raw_1 = __importDefault(require("./static/tables.malloy?raw"));
+const util_1 = require("./util");
+require("./themes.css");
+require("../component/render");
+const meta = {
+    title: 'Malloy Next/Tables',
+    render: ({ classes }, context) => {
+        const el = document.createElement('malloy-render');
+        if (classes)
+            el.classList.add(classes);
+        el.result = context.loaded['result'];
+        return el;
+    },
+    loaders: [(0, util_1.createLoader)(tables_malloy_raw_1.default)],
+    argTypes: {},
+};
+exports.default = meta;
+exports.ProductsTable = {
+    args: {
+        source: 'products',
+        view: `records`,
+    },
+};
+exports.ProductsTableCustomTheme = {
+    args: {
+        source: 'products',
+        view: 'records',
+        classes: 'night',
+    },
+};
+exports.Products2Column = {
+    args: {
+        source: 'products',
+        view: 'category_bar',
+    },
+};
+//# sourceMappingURL=tables.stories.js.map

package/dist/stories/util.d.ts

@@ -0,0 +1,11 @@
+import { LoaderFunction, Args } from '@storybook/types';
+import { HtmlRenderer } from '@storybook/html';
+import { DuckDBWASMConnection } from '@malloydata/db-duckdb/wasm';
+export type QueryOptions = {
+    script: string;
+    source: string;
+    view: string;
+    connection: Promise<DuckDBWASMConnection>;
+};
+export declare function createLoader(script: string): LoaderFunction<HtmlRenderer, Args>;
+export declare function runQuery({ script, source, view, connection, }: QueryOptions): Promise<import("@malloydata/malloy").Result>;

package/dist/stories/util.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runQuery = exports.createLoader = void 0;
+const malloy_1 = require("@malloydata/malloy");
+function createLoader(script) {
+    return async (context) => ({
+        result: await runQuery({
+            script,
+            source: context.args['source'],
+            view: context.args['view'],
+            connection: context.globals['connection'],
+        }),
+    });
+}
+exports.createLoader = createLoader;
+async function runQuery({ script, source, view, connection, }) {
+    const conn = await connection;
+    const runtime = new malloy_1.SingleConnectionRuntime(conn);
+    const model = runtime.loadModel(script);
+    const runner = model.loadQuery(`run: ${source} -> ${view}`);
+    const result = await runner.run();
+    return result;
+}
+exports.runQuery = runQuery;
+//# sourceMappingURL=util.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@malloydata/render",
-  "version": "0.0.101-dev231114015212",
+  "version": "0.0.101",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -23,8 +23,9 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@malloydata/malloy": "^0.0.101-dev231114015212",
+    "@malloydata/malloy": "^0.0.101",
     "@types/luxon": "^2.4.0",
+    "lit": "^3.0.2",
     "lodash": "^4.17.20",
     "luxon": "^2.4.0",
     "ssf": "^0.11.2",
@@ -40,6 +41,7 @@
     "@storybook/html": "^7.5.0",
     "@storybook/html-vite": "^7.5.0",
     "@storybook/testing-library": "^0.2.2",
+    "@storybook/types": "^7.5.3",
     "storybook": "^7.5.0"
   }
 }

package/dist/stories/render-malloy.d.ts

@@ -1,9 +0,0 @@
-import { DuckDBWASMConnection } from '@malloydata/db-duckdb/wasm';
-type RenderOptions = {
-    script: string;
-    source: string;
-    view: string;
-    connection: Promise<DuckDBWASMConnection>;
-};
-export declare function renderMalloy(options: RenderOptions): HTMLDivElement;
-export {};

package/dist/stories/render-malloy.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderMalloy = void 0;
-const malloy_1 = require("@malloydata/malloy");
-const html_1 = require("../html");
-async function runAndRender({ script, source, view, connection }) {
-    const conn = await connection;
-    const runtime = new malloy_1.SingleConnectionRuntime(conn);
-    const model = runtime.loadModel(script);
-    const runner = model.loadQuery(`run: ${source} -> ${view}`);
-    const viewer = new html_1.HTMLView(document);
-    const result = await runner.run();
-    return await viewer.render(result, { dataStyles: {} });
-}
-function renderMalloy(options) {
-    const div = document.createElement('div');
-    runAndRender(options).then(el => div.replaceChildren(el));
-    return div;
-}
-exports.renderMalloy = renderMalloy;
-//# sourceMappingURL=render-malloy.js.map