timvir 0.2.32 → 0.2.34

package/blocks/Font/index.js

@@ -1,4 +1,5 @@
 import { useMDXComponents } from '@mdx-js/react';
+import * as builtins from 'timvir/builtins';
 import * as React from 'react';
 import * as Icons from 'react-feather';
 
@@ -40,7 +41,7 @@ const classes = {
 };
 function Font(props, ref) {
   const components = {
-    h3: "h3",
+    ...builtins,
     ...useMDXComponents()
   };
   const {

package/blocks/Viewport/index.js

@@ -4,6 +4,7 @@ import { useResizeObserverEntry, useResizeObserver } from 'timvir/hooks';
 import * as React from 'react';
 import { useImmer } from 'use-immer';
 import { useMDXComponents } from '@mdx-js/react';
+import * as builtins from 'timvir/builtins';
 import { Code } from 'timvir/blocks';
 import * as Icons from 'react-feather';
 
@@ -38,7 +39,7 @@ var cx_default = cx;
 
 function Caption(props) {
   const components = {
-    a: "a",
+    ...builtins,
     ...useMDXComponents()
   };
   const {
@@ -119,25 +120,25 @@ function Ruler(props) {
     viewportWidth = 0
   } = props;
   return /*#__PURE__*/React.createElement("svg", {
-    viewBox: `-${containerWidth / 2} ${-height / 2} ${containerWidth} ${height}`,
+    viewBox: `-${containerWidth / 2} ${ -16 / 2} ${containerWidth} ${height}`,
     className: "ssl4j8q"
   }, /*#__PURE__*/React.createElement("rect", {
     x: -containerWidth / 2,
-    y: -height / 2,
+    y: -16 / 2,
     width: containerWidth,
     height: height,
     fill: "var(--timvir-secondary-background-color)"
   }), /*#__PURE__*/React.createElement("line", {
     x1: -viewportWidth / 2,
     x2: -viewportWidth / 2,
-    y1: -height / 2,
+    y1: -16 / 2,
     y2: height / 2,
     strokeWidth: 2,
     stroke: "var(--timvir-text-color)"
   }), /*#__PURE__*/React.createElement("line", {
     x1: viewportWidth / 2,
     x2: viewportWidth / 2,
-    y1: -height / 2,
+    y1: -16 / 2,
     y2: height / 2,
     strokeWidth: 2,
     stroke: "var(--timvir-text-color)"
@@ -217,22 +218,6 @@ function Viewport(props, ref) {
     setHeight(height);
     setMaxHeight(Math.max(height, maxHeight ?? 0));
   });
-
-  /*
-   * 20ms after the height has been set, we consider this block settled. This
-   * time includes the 16ms CSS transition time, and a tiny bit more to allow
-   * for the content in the iframe itself to finish rendering.
-   */
-  React.useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      mutate(draft => {
-        draft.settled = true;
-      });
-    }, 20);
-    return () => {
-      clearTimeout(timeoutId);
-    };
-  }, [mutate, height]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     ref: containerRef
   }), /*#__PURE__*/React.createElement(Root, {
@@ -279,7 +264,7 @@ function Viewport(props, ref) {
        */
 
       const initializeDocument = () => {
-        if (document.readyState === "interactive" || document.readyState === "complete") {
+        if (document.readyState === "complete") {
           /*
            * Inject a simple style reset into the document.
            */
@@ -303,6 +288,21 @@ function Viewport(props, ref) {
            * style reset into the iframe document).
            */
           iframeRO.observe(document.body);
+
+          /*
+           * 50ms after the iframe document is complete, we consider the Viewport block
+           * settled. This time includes the 16ms CSS transition time, and a tiny bit more
+           * to allow for the content in the iframe itself to finish rendering.
+           *
+           * This time is not quite enough if the iframe loads additional code or needs to
+           * load data from a remote source. But should be enough for statically rendered
+           * content.
+           */
+          setTimeout(() => {
+            mutate(draft => {
+              draft.settled = true;
+            });
+          }, 50);
         } else {
           document?.addEventListener("readystatechange", initializeDocument, {
             once: true

package/blocks/Viewport/internal/Handle.d.ts

@@ -3,7 +3,7 @@ interface Props {
     gridColumn: string;
     lock: React.MutableRefObject<string>;
     edge: "left" | "right";
-    iframeRef: React.RefObject<HTMLIFrameElement>;
+    iframeRef: React.RefObject<null | HTMLIFrameElement>;
 }
 declare function Handle(props: Props): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Handle>;

package/builtins/components.d.ts

@@ -1,18 +1,18 @@
 import * as React from "react";
-export declare const h1: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & Record<never, unknown>>;
+export declare const h1: any;
 export declare const h2: (props: React.HTMLAttributes<HTMLHeadingElement>) => React.JSX.Element;
 export declare const h3: (props: React.HTMLAttributes<HTMLHeadingElement>) => React.JSX.Element;
 export declare const h4: (props: React.HTMLAttributes<HTMLHeadingElement>) => React.JSX.Element;
-export declare const blockquote: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLQuoteElement> & React.BlockquoteHTMLAttributes<HTMLQuoteElement> & Record<never, unknown>>;
-export declare const hr: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLHRElement> & React.HTMLAttributes<HTMLHRElement> & Record<never, unknown>>;
-export declare const table: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLTableElement> & React.TableHTMLAttributes<HTMLTableElement> & Record<never, unknown>>;
-export declare const thead: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLTableSectionElement> & React.HTMLAttributes<HTMLTableSectionElement> & Record<never, unknown>>;
-export declare const tbody: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLTableSectionElement> & React.HTMLAttributes<HTMLTableSectionElement> & Record<never, unknown>>;
-export declare const tr: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLTableRowElement> & React.HTMLAttributes<HTMLTableRowElement> & Record<never, unknown>>;
-export declare const th: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLTableHeaderCellElement> & React.ThHTMLAttributes<HTMLTableHeaderCellElement> & Record<never, unknown>>;
-export declare const td: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLTableDataCellElement> & React.TdHTMLAttributes<HTMLTableDataCellElement> & Record<never, unknown>>;
-export declare const code: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & Record<never, unknown>>;
-export declare const a: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & Record<never, unknown>>;
-export declare const p: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLParagraphElement> & React.HTMLAttributes<HTMLParagraphElement> & Record<never, unknown>>;
-export declare const ul: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement> & Record<never, unknown>>;
-export declare const ol: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLOListElement> & React.OlHTMLAttributes<HTMLOListElement> & Record<never, unknown>>;
+export declare const blockquote: any;
+export declare const hr: any;
+export declare const table: any;
+export declare const thead: any;
+export declare const tbody: any;
+export declare const tr: any;
+export declare const th: any;
+export declare const td: any;
+export declare const code: any;
+export declare const a: any;
+export declare const p: any;
+export declare const ul: any;
+export declare const ol: any;

package/builtins/index.js

@@ -101,7 +101,7 @@ function styled(tag) {
     }
     const render = (props, ref) => {
       const { as: component = tag, class: className = mockedClass } = props;
-      const shouldKeepProps = options.propsAsIs === void 0 ? !(typeof component === "string" && component.indexOf("-") === -1 && !isCapital(component[0])) : options.propsAsIs;
+      const shouldKeepProps = options.propsAsIs === undefined ? !(typeof component === "string" && component.indexOf("-") === -1 && !isCapital(component[0])) : options.propsAsIs;
       const filteredProps = filterProps(shouldKeepProps, props, [
         "as",
         "class"

package/core/components/Page/types.d.ts

@@ -1,6 +1,8 @@
 import * as React from "react";
 export interface Node {
-    readonly icon?: React.ReactElement;
+    readonly icon?: React.ReactElement<{
+        className?: string;
+    }>;
     readonly label: string;
     readonly path?: string;
     readonly children?: readonly Node[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "timvir",
-  "version": "0.2.32",
+  "version": "0.2.34",
   "license": "MIT",
   "sideEffects": false,
   "exports": {
@@ -20,7 +20,7 @@
     "downshift": "^7 || ^8 || ^9",
     "fuzzaldrin-plus": "^0.6.0",
     "immer": "^9 || ^10",
-    "shiki": "^1",
+    "shiki": "^1 || ^2",
     "react-feather": "^2",
     "use-immer": "^0.8.0 || ^0.8.1 || ^0.9.0 || ^0.10.0 || ^0.11.0",
     "wonka": "^6"