@plasmicapp/react-web 0.2.160 → 0.2.162

package/dist/states/types.d.ts

@@ -9,6 +9,7 @@ export declare type NoUndefinedField<T> = {
     [P in keyof T]-?: T[P];
 };
 export declare type InitFunc<T> = (env: NoUndefinedField<InitFuncEnv>) => T;
+export declare type DeprecatedInitFunc<T> = ($props: Record<string, any>, $state: $State, $ctx: Record<string, any>) => T;
 export declare type ObjectPath = (string | number)[];
 export interface $StateSpec<T> {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/react-web",
-  "version": "0.2.160",
+  "version": "0.2.162",
   "description": "plasmic library for rendering in the presentational style",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -40,9 +40,9 @@
   },
   "prettier": {},
   "dependencies": {
-    "@plasmicapp/data-sources": "0.1.38",
+    "@plasmicapp/data-sources": "0.1.40",
     "@plasmicapp/data-sources-context": "0.1.6",
-    "@plasmicapp/host": "1.0.107",
+    "@plasmicapp/host": "1.0.108",
     "@plasmicapp/query": "0.1.61",
     "@react-aria/checkbox": "^3.5.0",
     "@react-aria/focus": "^3.7.0",
@@ -109,5 +109,5 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "gitHead": "fe1acf49f45a1c6f14418cd4f3ff62efddb5183d"
+  "gitHead": "42a82273c10229969e148da489db70aa88859c4a"
 }

package/skinny/dist/{collection-utils-b5d4be02.js → collection-utils-3496fd68.js}

@@ -60,6 +60,45 @@ import { g as getPlumeType, P as PLUME_STRICT_MODE } from './plume-utils-653f4b8
  * of list of Item/Section elements.  This is for efficiency, but we are opting
  * to only support the composite-component pattern for now for simplicity.
  */
+function deriveItemsFromProps(props, opts) {
+    if (opts.itemsProp && opts.itemsProp in props) {
+        if (!opts.ItemComponent || !opts.SectionComponent) {
+            throw new Error("You may need to re-generate your Plasmic* files");
+        }
+        var items = props[opts.itemsProp];
+        return deriveItemsFromItemsProp(items, {
+            ItemComponent: opts.ItemComponent,
+            SectionComponent: opts.SectionComponent
+        });
+    }
+    else {
+        return deriveItemsFromChildren(props.children, opts);
+    }
+}
+function deriveItemsFromItemsProp(items, opts) {
+    var _a;
+    var ItemComponent = opts.ItemComponent, SectionComponent = opts.SectionComponent;
+    var disabledKeys = [];
+    var transform = function (item) {
+        var _a;
+        if (typeof item === "string") {
+            return (React__default.createElement(ItemComponent, { key: item, value: item }, item));
+        }
+        else if ("children" in item) {
+            return (React__default.createElement(SectionComponent, { key: item.title, title: item.title }, item.children.map(function (x) { return transform(x); })));
+        }
+        else {
+            if (item.isDisabled) {
+                disabledKeys.push(item.value);
+            }
+            return (React__default.createElement(ItemComponent, { key: item.value, value: item.value, textValue: item.textValue, isDisabled: item.isDisabled }, (_a = item.label) !== null && _a !== void 0 ? _a : item.value));
+        }
+    };
+    return {
+        items: (_a = items === null || items === void 0 ? void 0 : items.map(function (x) { return transform(x); })) !== null && _a !== void 0 ? _a : [],
+        disabledKeys: disabledKeys
+    };
+}
 /**
  * Given children of a component like Select or Menu, derive the items
  * that we will pass into the Collections API.  These will be
@@ -132,6 +171,31 @@ function deriveItemsFromChildren(children, opts) {
     };
     return { items: flattenedChildren(children), disabledKeys: disabledKeys };
 }
+function useDerivedItems(props, opts) {
+    var children = props.children;
+    var itemPlumeType = opts.itemPlumeType, sectionPlumeType = opts.sectionPlumeType, invalidChildError = opts.invalidChildError, requireItemValue = opts.requireItemValue, ItemComponent = opts.ItemComponent, SectionComponent = opts.SectionComponent, itemsProp = opts.itemsProp;
+    var items = itemsProp ? props[itemsProp] : undefined;
+    return React__default.useMemo(function () {
+        return deriveItemsFromProps(props, {
+            itemPlumeType: itemPlumeType,
+            sectionPlumeType: sectionPlumeType,
+            invalidChildError: invalidChildError,
+            requireItemValue: requireItemValue,
+            itemsProp: itemsProp,
+            ItemComponent: ItemComponent,
+            SectionComponent: SectionComponent
+        });
+    }, [
+        children,
+        items,
+        itemPlumeType,
+        sectionPlumeType,
+        invalidChildError,
+        requireItemValue,
+        ItemComponent,
+        SectionComponent,
+    ]);
+}
 function useDerivedItemsFromChildren(children, opts) {
     var itemPlumeType = opts.itemPlumeType, sectionPlumeType = opts.sectionPlumeType, invalidChildError = opts.invalidChildError, requireItemValue = opts.requireItemValue;
     return React__default.useMemo(function () {
@@ -235,5 +299,5 @@ function cloneChild(child, props) {
     return React__default.cloneElement(child, props);
 }
 
-export { renderAsCollectionChild as a, getChildProp as g, renderCollectionNode as r, useDerivedItemsFromChildren as u };
-//# sourceMappingURL=collection-utils-b5d4be02.js.map
+export { renderAsCollectionChild as a, useDerivedItems as b, getChildProp as g, renderCollectionNode as r, useDerivedItemsFromChildren as u };
+//# sourceMappingURL=collection-utils-3496fd68.js.map

package/skinny/dist/collection-utils-3496fd68.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection-utils-3496fd68.js","sources":["../../src/plume/collection-utils.tsx"],"sourcesContent":["/**\n * In general, we try not to expose react-aria's Collections API to Plume users.\n * The Collections API is how react-aria users pass data about collections of\n * things using the built-in Item and Section components, which are abstract,\n * metadata-only components that don't render anything but only serve to specify\n * data.  For example, here's how you would use react-spectrum's Picker:\n *\n *   <Picker>\n *     <Section title=\"Asia\">\n *       <Item key=\"taiwan\">Taiwan</Item>\n *       <Item key=\"japan\">Japan</Item>\n *       <Item key=\"china\">China</Item>\n *     </Section>\n *     <Section title=\"Europe\">\n *       <Item key=\"germany\">Germany</Item>\n *       <Item key=\"france\">France</Item>\n *     </Section>\n *   </Picker>\n *\n * You would re-use this same Item/Section components to pass similar things to\n * Menu, Tabs, etc.\n *\n * For Plasmic, this API is too abstract.  The user has explicitly designed components\n * like Select.Option and Select.OptionGroup, and it is weird that they don't actually\n * use these components. It is more natural to do:\n *\n *   <Select>\n *     <Select.OptionGroup title=\"Asia\">\n *       <Select.Option key=\"taiwan\">Taiwan</Select>\n *     </Select.OptionGroup>\n *   </Select>\n *\n * For Plume, we let users directly use the components they designed, both to collect\n * information and to perform actual rendering.  For example, for Plume,\n * you'd use Select.Option instead of Item, and Select.OptionGroup instead of Section.\n * This means that the Select.Option props will collect the same information Item\n * does.\n *\n * A component like Select.Option then serves two purposes:\n *\n * 1. Allow users to specify the collection of data, like in the above example\n *    Here, we're mainly interested in the props in those ReactElements so\n *    we can pass the Item/Section data onto react-aria's APIs.  We are not\n *    actually rendering these elements.\n * 2. Once react-aria's Collections API has gone through them and built\n *    Collection \"nodes\", we then create cloned versions of these elements\n *    with the corresponding node passed in as a secret prop.  These ReactElements\n *    are then actually used to _render_ the corresponding Option / OptionGroup.\n *\n * This file contains helper functions to help with implementing the above.\n *\n * Note also that most of the collections-based react-aria components expose\n * a parallel API that accepts a list of \"items\" and a render prop, instead\n * of list of Item/Section elements.  This is for efficiency, but we are opting\n * to only support the composite-component pattern for now for simplicity.\n */\n\nimport { Item, Section } from \"@react-stately/collections\";\nimport { Node } from \"@react-types/shared\";\nimport React from \"react\";\nimport { isString } from \"../common\";\nimport { getElementTypeName, toChildArray } from \"../react-utils\";\nimport { getPlumeType, PLUME_STRICT_MODE } from \"./plume-utils\";\n\nexport interface PlasmicLoaderProps<T> {\n  component: string;\n  componentProps: T;\n}\n\n/**\n * Props for a Plume component that corresponds to an Item\n */\nexport interface ItemLikeProps {\n  /**\n   * value key corresponding to this item. Not required if you use the\n   * `key` prop instead.\n   */\n  value?: string | null;\n\n  /**\n   * The text string value corresponding to this item. Used to support\n   * keyboard type-ahead.  If not specified, then will be derived from\n   * `children` if it is a string, or the `value` or `key`.\n   */\n  textValue?: string;\n\n  /**\n   * aria-label for this item.\n   */\n  \"aria-label\"?: string;\n\n  /**\n   * Primary content label for this item.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * If true, this item will not be selectable.\n   */\n  isDisabled?: boolean;\n}\n\ntype LoaderAwareItemLikeProps =\n  | ItemLikeProps\n  | PlasmicLoaderProps<ItemLikeProps>;\n\n/**\n * Props for a Plume component that corresponds to a Section\n */\nexport interface SectionLikeProps {\n  /**\n   * Heading content of the title\n   */\n  title?: React.ReactNode;\n\n  /**\n   * aria-label for this section\n   */\n  \"aria-label\"?: string;\n\n  /**\n   * A list of items that belong in this group\n   */\n  children?: React.ReactNode;\n}\n\ntype LoaderAwareSectionLikeProps =\n  | SectionLikeProps\n  | PlasmicLoaderProps<SectionLikeProps>;\n\nexport type ItemJson = LeafItemJson | SectionJson;\n\nexport type LeafItemJson =\n  | string\n  | {\n      value: string;\n      label?: string;\n      textValue?: string;\n      isDisabled?: boolean;\n    };\n\nexport interface SectionJson {\n  title: string;\n  children: ItemJson[];\n}\n\nexport function deriveItemsFromProps(\n  props: any,\n  opts: {\n    itemPlumeType: string;\n    sectionPlumeType?: string;\n    invalidChildError?: string;\n    requireItemValue: boolean;\n    ItemComponent?: React.ComponentType<ItemLikeProps>;\n    SectionComponent?: React.ComponentType<SectionLikeProps>;\n    itemsProp?: string;\n  }\n) {\n  if (opts.itemsProp && opts.itemsProp in props) {\n    if (!opts.ItemComponent || !opts.SectionComponent) {\n      throw new Error(`You may need to re-generate your Plasmic* files`);\n    }\n    const items = props[opts.itemsProp] as ItemJson[] | undefined;\n    return deriveItemsFromItemsProp(items, {\n      ItemComponent: opts.ItemComponent,\n      SectionComponent: opts.SectionComponent,\n    });\n  } else {\n    return deriveItemsFromChildren(props.children as React.ReactNode, opts);\n  }\n}\n\nfunction deriveItemsFromItemsProp(\n  items: ItemJson[] | undefined,\n  opts: {\n    ItemComponent: React.ComponentType<ItemLikeProps>;\n    SectionComponent: React.ComponentType<SectionLikeProps>;\n  }\n) {\n  const { ItemComponent, SectionComponent } = opts;\n  const disabledKeys: string[] = [];\n  const transform = (item: ItemJson) => {\n    if (typeof item === \"string\") {\n      return (\n        <ItemComponent key={item} value={item}>\n          {item}\n        </ItemComponent>\n      );\n    } else if (\"children\" in item) {\n      return (\n        <SectionComponent key={item.title} title={item.title}>\n          {item.children.map((x) => transform(x))}\n        </SectionComponent>\n      );\n    } else {\n      if (item.isDisabled) {\n        disabledKeys.push(item.value);\n      }\n      return (\n        <ItemComponent\n          key={item.value}\n          value={item.value}\n          textValue={item.textValue}\n          isDisabled={item.isDisabled}\n        >\n          {item.label ?? item.value}\n        </ItemComponent>\n      );\n    }\n  };\n  return {\n    items: items?.map((x) => transform(x)) ?? [],\n    disabledKeys,\n  };\n}\n\n/**\n * Given children of a component like Select or Menu, derive the items\n * that we will pass into the Collections API.  These will be\n * ReactElement<ItemLikeProps|SectionLikeProps>[].\n *\n * Will also assign keys to items by their index in the collection,\n * and collect the keys of disabled items.\n */\nexport function deriveItemsFromChildren<T extends React.ReactElement>(\n  children: React.ReactNode,\n  opts: {\n    itemPlumeType: string;\n    sectionPlumeType?: string;\n    invalidChildError?: string;\n    requireItemValue: boolean;\n  }\n) {\n  if (!children) {\n    return {\n      items: [] as T[],\n      disabledKeys: [] as React.Key[],\n    };\n  }\n\n  const { itemPlumeType, sectionPlumeType, invalidChildError } = opts;\n\n  // For Plume items without an explicit key, we assign a key as the index\n  // of the collection.\n  let itemCount = 0;\n  let sectionCount = 0;\n\n  const ensureValue = (element: React.ReactElement) => {\n    if (!propInChild(element, \"value\")) {\n      if (opts.requireItemValue && PLUME_STRICT_MODE) {\n        throw new Error(\n          `Must specify a \"value\" prop for ${getElementTypeName(element)}`\n        );\n      } else {\n        return cloneChild(element, { value: `${itemCount++}` });\n      }\n    } else {\n      // Still increment count even if key is present, so that the\n      // auto-assigned key really reflects the index\n      itemCount++;\n      return element;\n    }\n  };\n\n  const disabledKeys: React.Key[] = [];\n\n  const flattenedChildren = (\n    children: React.ReactNode\n  ): React.ReactElement[] => {\n    return toChildArray(children).flatMap((child) => {\n      if (React.isValidElement(child)) {\n        if (child.type === React.Fragment) {\n          return flattenedChildren(\n            (child as React.ReactElement<{ children: React.ReactNode }>).props\n              .children\n          );\n        }\n        const type = getPlumeType(child);\n        if (type === itemPlumeType) {\n          child = ensureValue(child);\n          const childKey = getItemLikeKey(child);\n          if (getChildProp(child, \"isDisabled\") && !!childKey) {\n            disabledKeys.push(childKey);\n          }\n          return [child];\n        }\n        if (type === sectionPlumeType) {\n          return [\n            cloneChild(child, {\n              // key of section doesn't actually matter, just needs\n              // to be unique\n              key: child.key ?? `section-${sectionCount++}`,\n              children: flattenedChildren(getChildProp(child, \"children\")),\n            }),\n          ];\n        }\n      }\n\n      if (PLUME_STRICT_MODE) {\n        throw new Error(invalidChildError ?? `Unexpected child`);\n      } else {\n        return [];\n      }\n    });\n  };\n\n  return { items: flattenedChildren(children) as T[], disabledKeys };\n}\n\nexport function useDerivedItems(\n  props: any,\n  opts: {\n    itemPlumeType: string;\n    sectionPlumeType?: string;\n    invalidChildError?: string;\n    requireItemValue: boolean;\n    ItemComponent?: React.ComponentType<ItemLikeProps>;\n    SectionComponent?: React.ComponentType<SectionLikeProps>;\n    itemsProp?: string;\n  }\n) {\n  const { children } = props;\n  const {\n    itemPlumeType,\n    sectionPlumeType,\n    invalidChildError,\n    requireItemValue,\n    ItemComponent,\n    SectionComponent,\n    itemsProp,\n  } = opts;\n  const items = itemsProp ? props[itemsProp] : undefined;\n  return React.useMemo(() => {\n    return deriveItemsFromProps(props, {\n      itemPlumeType,\n      sectionPlumeType,\n      invalidChildError,\n      requireItemValue,\n      itemsProp,\n      ItemComponent,\n      SectionComponent,\n    });\n  }, [\n    children,\n    items,\n    itemPlumeType,\n    sectionPlumeType,\n    invalidChildError,\n    requireItemValue,\n    ItemComponent,\n    SectionComponent,\n  ]);\n}\n\nexport function useDerivedItemsFromChildren<T extends React.ReactElement>(\n  children: React.ReactNode,\n  opts: {\n    itemPlumeType: string;\n    sectionPlumeType?: string;\n    invalidChildError?: string;\n    requireItemValue: boolean;\n  }\n) {\n  const {\n    itemPlumeType,\n    sectionPlumeType,\n    invalidChildError,\n    requireItemValue,\n  } = opts;\n  return React.useMemo(() => {\n    return deriveItemsFromChildren<T>(children, {\n      itemPlumeType,\n      sectionPlumeType,\n      invalidChildError,\n      requireItemValue,\n    });\n  }, [\n    children,\n    itemPlumeType,\n    sectionPlumeType,\n    invalidChildError,\n    requireItemValue,\n  ]);\n}\n\n/**\n * Given a Collection node, create the React element that we should use\n * to render it.\n */\nexport function renderCollectionNode(node: Node<any>) {\n  // node.rendered should already have our item-like or section-like Plume\n  // component elements, so we just need to clone them with a secret\n  // _node prop that we use to render.\n  return cloneChild(node.rendered as React.ReactElement, {\n    _node: node,\n    key: node.key,\n  });\n}\n\n/**\n * Renders a item-like or section-like Plume component element into an\n * Item or a Section element.\n */\nexport function renderAsCollectionChild<\n  T extends React.ReactElement<\n    LoaderAwareItemLikeProps | LoaderAwareSectionLikeProps\n  >\n>(\n  child: T,\n  opts: {\n    itemPlumeType: string;\n    sectionPlumeType?: string;\n  }\n) {\n  const plumeType = getPlumeType(child);\n  if (plumeType === opts.itemPlumeType) {\n    const option = child as React.ReactElement<LoaderAwareItemLikeProps>;\n\n    // We look at the children passed to the item-like element, and derive key\n    // or textValue from it if it is a string\n    const content = getChildProp(option, \"children\");\n\n    // The children render prop needs to return an <Item/>\n    return (\n      <Item\n        // We use ItemLike.value if the user explicitly specified a value,\n        // and we fallback to key.  If the user specified neither, then\n        // the Collections API will generate a unique key for this item.\n        key={getItemLikeKey(option)}\n        // textValue is either explicitly specified by the user, or we\n        // try to derive it if `content` is a string.\n        textValue={\n          getChildProp(option, \"textValue\") ??\n          (isString(content)\n            ? content\n            : propInChild(option, \"value\")\n            ? getChildProp(option, \"value\")\n            : option.key)\n        }\n        aria-label={getChildProp(option, \"aria-label\")}\n      >\n        {\n          // Note that what we setting the item-like element as the children\n          // here, and not content; we want the entire item-like Plume element to\n          // end up as Node.rendered.\n        }\n        {option}\n      </Item>\n    );\n  } else {\n    const group = child as React.ReactElement<LoaderAwareSectionLikeProps>;\n    return (\n      <Section\n        // Note that we are using the whole section-like element as the title\n        // here, and not group.props.title; we want the entire section-like\n        // Plume element to end up as Node.rendered.\n        title={group}\n        aria-label={getChildProp(group, \"aria-label\")}\n        // We are flattening and deriving the descendant Options as items here.\n        // group.props.children should've already been cleaned up by\n        // deriveItemsFromChildren()\n        items={getChildProp(group, \"children\") as React.ReactElement[]}\n      >\n        {\n          // We use the same render function to turn descendent Options into Items\n        }\n        {(c: React.ReactElement) => renderAsCollectionChild(c, opts)}\n      </Section>\n    );\n  }\n}\n\nfunction getItemLikeKey(element: React.ReactElement<LoaderAwareItemLikeProps>) {\n  return getChildProp(element, \"value\") ?? element.key;\n}\n\n// PlasmicLoader-aware function to get prop from child.\nexport function getChildProp(child: React.ReactElement, prop: string) {\n  return \"componentProps\" in child.props\n    ? child.props.componentProps[prop]\n    : child.props[prop];\n}\n\n// PlasmicLoader-aware function to check `if (prop in element.props)`.\nfunction propInChild(child: React.ReactElement, prop: string): boolean {\n  return \"componentProps\" in child.props\n    ? prop in child.props.componentProps\n    : prop in child.props;\n}\n\n// PlasmicLoader-aware function to clone React element.\nfunction cloneChild(child: React.ReactElement, props: Record<string, any>) {\n  if ((child.type as any).getPlumeType) {\n    // If React element has getPlumeType(), assume that it is PlasmicLoader,\n    // so add nodeProps to componentProps instead of element props.\n    return React.cloneElement(child, {\n      componentProps: {\n        ...child.props.componentProps,\n        ...props,\n      },\n      ...(props.key ? { key: props.key } : {}),\n    });\n  }\n\n  return React.cloneElement(child, props);\n}\n"],"names":["React"],"mappings":"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"}

package/skinny/dist/index.js

@@ -1090,11 +1090,12 @@ function initializeStateValue($$state, initialSpecNode, initialStatePath, proxyR
     stateAccess.forEach(function (_a) {
         var node = _a.node, path = _a.path;
         node.addListener(path, function () {
-            var newValue = initialSpecNode.getSpec().initFunc(__assign({ $state: $state }, $$state.env));
+            var newValue = invokeInitFuncBackwardsCompatible(initialSpecNode.getSpec().initFunc, __assign({ $state: $state }, $$state.env));
             set(proxyRoot, initialStatePath, newValue);
         });
     });
-    var initialValue = initialSpecNode.getInitFunc(initialSpecNode.getState(initialStatePath))(__assign({ $state: $state }, $$state.env));
+    var initFunc = initialSpecNode.getInitFunc(initialSpecNode.getState(initialStatePath));
+    var initialValue = invokeInitFuncBackwardsCompatible(initFunc, __assign({ $state: $state }, $$state.env));
     initialSpecNode.setInitialValue(initialStatePath, clone(initialValue));
     var initialSpec = initialSpecNode.getSpec();
     var value = initialSpec.isImmutable
@@ -1288,6 +1289,14 @@ function extractDollarStateParametersBackwardCompatible() {
         };
     }
 }
+function invokeInitFuncBackwardsCompatible(initFunc, env) {
+    if (initFunc.length > 1) {
+        return initFunc(env.$props, env.$state, env.$ctx);
+    }
+    else {
+        return initFunc(env);
+    }
+}
 function useDollarState(specs) {
     var rest = [];
     for (var _i = 1; _i < arguments.length; _i++) {
@@ -1385,7 +1394,7 @@ function useDollarState(specs) {
         var node = _a.node, stateCell = _a.stateCell;
         var initFunc = node.getInitFunc(stateCell);
         if (initFunc) {
-            var newInit = initFunc(__assign({ $state: $state }, envFieldsAreNonNill(env)));
+            var newInit = invokeInitFuncBackwardsCompatible(initFunc, __assign({ $state: $state }, envFieldsAreNonNill(env)));
             if (!deepEqual(newInit, stateCell.initialValue)) {
                 resetSpecs.push({ stateCell: stateCell, node: node });
             }