@webkrafters/react-observable-context 5.0.0-rc.2 → 5.0.0-rc.3

package/dist/main/test-apps/normal.d.ts

@@ -1,36 +0,0 @@
-import React from 'react';
-import { SelectorMap } from '../../index';
-export type TestState = {
-    color: string;
-    customer: {
-        name: {
-            first: string;
-            last: string;
-        };
-        phone: string;
-    };
-    price: number;
-    type: string;
-};
-export declare const ObservableContext: import("../../index").ObservableContext<Partial<TestState>>;
-export declare const useObservableContext: <S extends SelectorMap>(selectorMap?: S) => import("../../index").Store<Partial<TestState>, S>;
-export declare const Reset: React.FC;
-export declare const CapitalizedDisplay: React.FC<{
-    text: string;
-}>;
-export declare const CustomerPhoneDisplay: React.FC;
-export type Data<SELECTOR_MAP extends SelectorMap = SelectorMap> = {
-    [selectorKey in keyof SELECTOR_MAP]: Readonly<unknown>;
-};
-export declare const TallyDisplay: React.FC;
-export declare const Editor: React.FC;
-export declare const ProductDescription: React.FC;
-export declare const PriceSticker: React.FC;
-export declare const Product: React.FC<{
-    prehooks?: import("../../index").Prehooks<{
-        [x: string]: *;
-    }>;
-    type: string;
-}>;
-declare const App: React.FC;
-export default App;

package/dist/main/test-apps/normal.js

@@ -1,243 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Product = exports.PriceSticker = exports.ProductDescription = exports.Editor = exports.TallyDisplay = exports.CustomerPhoneDisplay = exports.CapitalizedDisplay = exports.Reset = exports.useObservableContext = exports.ObservableContext = void 0;
-const react_1 = __importStar(require("react"));
-const lodash_isempty_1 = __importDefault(require("lodash.isempty"));
-const __1 = require("..");
-exports.ObservableContext = (0, __1.createContext)();
-const useObservableContext = (selectorMap) => (0, __1.useContext)(exports.ObservableContext, selectorMap);
-exports.useObservableContext = useObservableContext;
-const Reset = () => {
-    const { resetState } = (0, exports.useObservableContext)();
-    (0, react_1.useEffect)(() => console.log('Reset component rendered.....'));
-    const reset = (0, react_1.useCallback)(() => resetState(['@@STATE']), [resetState]);
-    return (react_1.default.createElement("button", { onClick: reset }, "reset context"));
-};
-exports.Reset = Reset;
-exports.Reset.displayName = 'Reset';
-const CapitalizedDisplay = ({ text }) => {
-    (0, react_1.useEffect)(() => console.log(`CapitalizedDisplay( ${text} ) component rendered.....`));
-    return text && (react_1.default.createElement(react_1.default.Fragment, null, `${text[0].toUpperCase()}${text.length > 1 ? text.slice(1) : ''}`));
-};
-exports.CapitalizedDisplay = CapitalizedDisplay;
-exports.CapitalizedDisplay.displayName = 'CapitalizedDisplay';
-const CustomerPhoneDisplay = () => {
-    const { data } = (0, exports.useObservableContext)({ phone: 'customer.phone' });
-    (0, react_1.useEffect)(() => console.log('CustomerPhoneDisplay component rendered.....'));
-    return (react_1.default.createElement(react_1.default.Fragment, null, `Phone: ${data.phone ?? 'n.a.'}`));
-};
-exports.CustomerPhoneDisplay = CustomerPhoneDisplay;
-exports.CustomerPhoneDisplay.displayName = 'CustomerPhoneDisplay';
-const TallyDisplay = () => {
-    const { data: { color, name, price, type } } = (0, exports.useObservableContext)({
-        color: 'color',
-        name: 'customer.name',
-        price: 'price',
-        type: 'type'
-    });
-    (0, react_1.useEffect)(() => console.log('TallyDisplay component rendered.....'));
-    return (react_1.default.createElement("div", { style: { margin: '20px 0 10px' } },
-        react_1.default.createElement("div", { style: { float: 'left', fontSize: '1.75rem' } },
-            "Customer:",
-            ' ',
-            (0, lodash_isempty_1.default)(name.first) && (0, lodash_isempty_1.default)(name.last)
-                ? 'n.a.'
-                : (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(exports.CapitalizedDisplay, { text: name.first }),
-                    ' ',
-                    react_1.default.createElement(exports.CapitalizedDisplay, { text: name.last })))),
-        react_1.default.createElement("div", { style: { clear: 'both', paddingLeft: 3 } },
-            react_1.default.createElement(exports.CustomerPhoneDisplay, null)),
-        react_1.default.createElement("table", null,
-            react_1.default.createElement("tbody", null,
-                react_1.default.createElement("tr", null,
-                    react_1.default.createElement("td", null,
-                        react_1.default.createElement("label", null, "Type:")),
-                    react_1.default.createElement("td", null,
-                        react_1.default.createElement(exports.CapitalizedDisplay, { text: type }))),
-                react_1.default.createElement("tr", null,
-                    react_1.default.createElement("td", null,
-                        react_1.default.createElement("label", null, "Color:")),
-                    react_1.default.createElement("td", null,
-                        react_1.default.createElement(exports.CapitalizedDisplay, { text: color }))),
-                react_1.default.createElement("tr", null,
-                    react_1.default.createElement("td", null,
-                        react_1.default.createElement("label", null, "Price:")),
-                    react_1.default.createElement("td", null, price.toFixed(2))))),
-        react_1.default.createElement("div", { style: { textAlign: 'right' } },
-            react_1.default.createElement(exports.Reset, null))));
-};
-exports.TallyDisplay = TallyDisplay;
-exports.TallyDisplay.displayName = 'TallyDisplay';
-const Editor = () => {
-    const { setState } = (0, exports.useObservableContext)();
-    const fNameInputRef = (0, react_1.useRef)(null);
-    const lNameInputRef = (0, react_1.useRef)(null);
-    const phoneInputRef = (0, react_1.useRef)(null);
-    const priceInputRef = (0, react_1.useRef)(null);
-    const colorInputRef = (0, react_1.useRef)(null);
-    const typeInputRef = (0, react_1.useRef)(null);
-    const updateColor = (0, react_1.useCallback)(() => {
-        setState({ color: colorInputRef?.current?.value }); // as unknown as string
-    }, []);
-    const updateName = (0, react_1.useCallback)(() => {
-        setState({
-            customer: {
-                name: {
-                    first: fNameInputRef.current.value,
-                    last: lNameInputRef.current.value
-                }
-            }
-        });
-    }, []);
-    const updatePhone = (0, react_1.useCallback)(() => {
-        const phone = phoneInputRef.current.value;
-        if (phone.length && !/[0-9]{10}/.test(phone)) {
-            return;
-        }
-        setState({ customer: { phone } });
-    }, []);
-    const updatePrice = (0, react_1.useCallback)(() => {
-        setState({ price: Number(priceInputRef.current.value) });
-    }, []);
-    const updateType = (0, react_1.useCallback)(() => {
-        setState({ type: typeInputRef.current.value });
-    }, []);
-    (0, react_1.useEffect)(() => console.log('Editor component rendered.....'));
-    return (react_1.default.createElement("fieldset", { style: { margin: '10px 0' } },
-        react_1.default.createElement("legend", null, "Editor"),
-        react_1.default.createElement("h3", { style: { margin: '0.5rem 0' } }, "Customer:"),
-        react_1.default.createElement("div", { style: { float: 'left', margin: '10px 0' } },
-            react_1.default.createElement("label", { htmlFor: 'firstName' },
-                react_1.default.createElement("input", { ref: fNameInputRef, placeholder: "First name" })),
-            ' ',
-            react_1.default.createElement("label", { htmlFor: 'lastName' },
-                react_1.default.createElement("input", { ref: lNameInputRef, placeholder: "Last name" })),
-            ' ',
-            react_1.default.createElement("button", { onClick: updateName }, "update customer")),
-        react_1.default.createElement("div", { style: { clear: 'both', margin: '10px 0' } },
-            react_1.default.createElement("label", null,
-                "New Phone: ",
-                react_1.default.createElement("input", { maxLength: 10, placeholder: "Empty or 10-digit integer", ref: phoneInputRef, type: "number" })),
-            ' ',
-            react_1.default.createElement("button", { onClick: updatePhone }, "update phone")),
-        react_1.default.createElement("hr", { style: { margin: '1.5rem 0' } }),
-        react_1.default.createElement("div", { style: { margin: '10px 0' } },
-            react_1.default.createElement("label", null,
-                "New Price: ",
-                react_1.default.createElement("input", { ref: priceInputRef })),
-            ' ',
-            react_1.default.createElement("button", { onClick: updatePrice }, "update price")),
-        react_1.default.createElement("div", { style: { margin: '10px 0' } },
-            react_1.default.createElement("label", null,
-                "New Color: ",
-                react_1.default.createElement("input", { ref: colorInputRef })),
-            ' ',
-            react_1.default.createElement("button", { onClick: updateColor }, "update color")),
-        react_1.default.createElement("div", { style: { margin: '10px 0' } },
-            react_1.default.createElement("label", null,
-                "New Type: ",
-                react_1.default.createElement("input", { ref: typeInputRef })),
-            ' ',
-            react_1.default.createElement("button", { onClick: updateType }, "update type"))));
-};
-exports.Editor = Editor;
-exports.Editor.displayName = 'Editor';
-const ProductDescription = () => {
-    const { data } = (0, exports.useObservableContext)({
-        c: 'color', t: 'type'
-    });
-    (0, react_1.useEffect)(() => console.log('ProductDescription component rendered.....'));
-    return (react_1.default.createElement("div", { style: { fontSize: 24 } },
-        react_1.default.createElement("strong", null, "Description:"),
-        " ",
-        data.c,
-        " ",
-        data.t));
-};
-exports.ProductDescription = ProductDescription;
-exports.ProductDescription.displayName = 'ProductDescription';
-const PriceSticker = () => {
-    const { data: { p } } = (0, exports.useObservableContext)({ p: 'price' });
-    (0, react_1.useEffect)(() => console.log('PriceSticker component rendered.....'));
-    return (react_1.default.createElement("div", { style: { fontSize: 36, fontWeight: 800 } },
-        "$",
-        p.toFixed(2)));
-};
-exports.PriceSticker = PriceSticker;
-exports.PriceSticker.displayName = 'PriceSticker';
-const Product = ({ prehooks = undefined, type }) => {
-    const [state, setState] = (0, react_1.useState)(() => ({
-        color: 'Burgundy',
-        customer: {
-            name: { first: null, last: null },
-            phone: null
-        },
-        price: 22.5,
-        type
-    }));
-    (0, react_1.useEffect)(() => {
-        setState({ type }); // use this to update only the changed state
-        // setState({ ...state, type }); // this will override the context internal state for these values
-    }, [type]);
-    const overridePricing = (0, react_1.useCallback)(e => setState({
-        price: Number(e.target.value)
-    }), []);
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("div", { style: { marginBottom: 10 } },
-            react_1.default.createElement("label", null,
-                "$ ",
-                react_1.default.createElement("input", { onKeyUp: overridePricing, placeholder: "override price here..." }))),
-        react_1.default.createElement(exports.ObservableContext.Provider, { prehooks: prehooks, value: state },
-            react_1.default.createElement("div", { style: {
-                    borderBottom: '1px solid #333',
-                    marginBottom: 10,
-                    paddingBottom: 5
-                } },
-                react_1.default.createElement(exports.Editor, null),
-                react_1.default.createElement(exports.TallyDisplay, null)),
-            react_1.default.createElement(exports.ProductDescription, null),
-            react_1.default.createElement(exports.PriceSticker, null))));
-};
-exports.Product = Product;
-exports.Product.displayName = 'Product';
-const App = () => {
-    const [productType, setProductType] = (0, react_1.useState)('Calculator');
-    const updateType = (0, react_1.useCallback)(e => setProductType(e.target.value), []);
-    return (react_1.default.createElement("div", { className: "App" },
-        react_1.default.createElement("h1", null, "Demo"),
-        react_1.default.createElement("h2", null, "A contrived product app."),
-        react_1.default.createElement("div", { style: { marginBottom: 10 } },
-            react_1.default.createElement("label", null,
-                "Type: ",
-                react_1.default.createElement("input", { onKeyUp: updateType, placeholder: "override product type here..." }))),
-        react_1.default.createElement(exports.Product, { type: productType })));
-};
-App.displayName = 'App';
-exports.default = App;

package/dist/main/test-apps/with-connected-children.d.ts

@@ -1,25 +0,0 @@
-import type { FC, ReactNode } from 'react';
-import React from 'react';
-export declare const ConnectedReset: import("../..").ConnectedComponent<import("../..").InjectedProps<import("../..").IProps & Record<any, any>>>;
-export declare const ConnectedCustomerPhoneDisplay: import("../..").ConnectedComponent<import("../..").InjectedProps<import("../..").IProps & Record<any, any>>>;
-export declare const ConnectedTallyDisplay: import("../..").ConnectedComponent<import("../..").InjectedProps<import("../..").IProps & Record<any, any>>>;
-export declare const ConnectedEditor: import("../..").ConnectedComponent<import("../..").InjectedProps<import("../..").IProps & Record<any, any>>>;
-export declare const ProductDescription: FC<{
-    data: {
-        c: ReactNode;
-        t: ReactNode;
-    };
-}>;
-export declare const ConnectedProductDescription: import("../..").ConnectedComponent<import("../..").InjectedProps<import("../..").IProps & Record<any, any>>>;
-export declare const PriceSticker: FC<{
-    data: {
-        p: number;
-    };
-}>;
-export declare const ConnectedPriceSticker: import("../..").ConnectedComponent<import("../..").InjectedProps<import("../..").IProps & Record<any, any>>>;
-export declare const Product: React.FC<{
-    prehooks?: import("../..").Prehooks;
-    type: string;
-}>;
-declare const App: React.FC;
-export default App;

package/dist/main/test-apps/with-connected-children.js

@@ -1,229 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Product = exports.ConnectedPriceSticker = exports.PriceSticker = exports.ConnectedProductDescription = exports.ProductDescription = exports.ConnectedEditor = exports.ConnectedTallyDisplay = exports.ConnectedCustomerPhoneDisplay = exports.ConnectedReset = void 0;
-const react_1 = __importStar(require("react"));
-const lodash_isempty_1 = __importDefault(require("lodash.isempty"));
-const __1 = require("..");
-const normal_1 = require("./normal");
-const Reset = ({ resetState }) => {
-    (0, react_1.useEffect)(() => console.log('Reset component rendered.....'));
-    const reset = (0, react_1.useCallback)(() => resetState(['@@STATE']), [resetState]);
-    return (react_1.default.createElement("button", { onClick: reset }, "reset context"));
-};
-Reset.displayName = 'Reset';
-exports.ConnectedReset = (0, __1.connect)(normal_1.ObservableContext)(Reset);
-const CustomerPhoneDisplay = ({ data }) => {
-    (0, react_1.useEffect)(() => console.log('CustomerPhoneDisplay component rendered.....'));
-    return `Phone: ${data.phone ?? 'n.a.'}`;
-};
-CustomerPhoneDisplay.displayName = 'CustomerPhoneDisplay';
-exports.ConnectedCustomerPhoneDisplay = (0, __1.connect)(normal_1.ObservableContext, { phone: 'customer.phone' })(CustomerPhoneDisplay);
-const TallyDisplay = ({ data: { color, name, price, type } }) => {
-    (0, react_1.useEffect)(() => console.log('TallyDisplay component rendered.....'));
-    return (react_1.default.createElement("div", { style: { margin: '20px 0 10px' } },
-        react_1.default.createElement("div", { style: { float: 'left', fontSize: '1.75rem' } },
-            "Customer:",
-            ' ',
-            (0, lodash_isempty_1.default)(name.first) && (0, lodash_isempty_1.default)(name.last)
-                ? 'n.a.'
-                : (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(normal_1.CapitalizedDisplay, { text: name.first }),
-                    ' ',
-                    react_1.default.createElement(normal_1.CapitalizedDisplay, { text: name.last })))),
-        react_1.default.createElement("div", { style: { clear: 'both', paddingLeft: 3 } },
-            react_1.default.createElement(exports.ConnectedCustomerPhoneDisplay, null)),
-        react_1.default.createElement("table", null,
-            react_1.default.createElement("tbody", null,
-                react_1.default.createElement("tr", null,
-                    react_1.default.createElement("td", null,
-                        react_1.default.createElement("label", null, "Type:")),
-                    react_1.default.createElement("td", null,
-                        react_1.default.createElement(normal_1.CapitalizedDisplay, { text: type }))),
-                react_1.default.createElement("tr", null,
-                    react_1.default.createElement("td", null,
-                        react_1.default.createElement("label", null, "Color:")),
-                    react_1.default.createElement("td", null,
-                        react_1.default.createElement(normal_1.CapitalizedDisplay, { text: color }))),
-                react_1.default.createElement("tr", null,
-                    react_1.default.createElement("td", null,
-                        react_1.default.createElement("label", null, "Price:")),
-                    react_1.default.createElement("td", null, price.toFixed(2))))),
-        react_1.default.createElement("div", { style: { textAlign: 'right' } },
-            react_1.default.createElement(exports.ConnectedReset, null))));
-};
-TallyDisplay.displayName = 'TallyDisplay';
-exports.ConnectedTallyDisplay = (0, __1.connect)(normal_1.ObservableContext, {
-    color: 'color',
-    name: 'customer.name',
-    price: 'price',
-    type: 'type'
-})(TallyDisplay);
-const Editor = ({ setState }) => {
-    const fNameInputRef = (0, react_1.useRef)();
-    const lNameInputRef = (0, react_1.useRef)();
-    const phoneInputRef = (0, react_1.useRef)();
-    const priceInputRef = (0, react_1.useRef)();
-    const colorInputRef = (0, react_1.useRef)();
-    const typeInputRef = (0, react_1.useRef)();
-    const updateColor = (0, react_1.useCallback)(() => {
-        setState({ color: colorInputRef.current.value });
-    }, []);
-    const updateName = (0, react_1.useCallback)(() => {
-        setState({
-            customer: {
-                name: {
-                    first: fNameInputRef.current.value,
-                    last: lNameInputRef.current.value
-                }
-            }
-        });
-    }, []);
-    const updatePhone = (0, react_1.useCallback)(() => {
-        const phone = phoneInputRef.current.value;
-        if (phone.length && !/[0-9]{10}/.test(phone)) {
-            return;
-        }
-        setState({ customer: { phone } });
-    }, []);
-    const updatePrice = (0, react_1.useCallback)(() => {
-        setState({ price: Number(priceInputRef.current.value) });
-    }, []);
-    const updateType = (0, react_1.useCallback)(() => {
-        setState({ type: typeInputRef.current.value });
-    }, []);
-    (0, react_1.useEffect)(() => console.log('Editor component rendered.....'));
-    return (react_1.default.createElement("fieldset", { style: { margin: '10px 0' } },
-        react_1.default.createElement("legend", null, "Editor"),
-        react_1.default.createElement("h3", { style: { margin: '0.5rem 0' } }, "Customer:"),
-        react_1.default.createElement("div", { style: { float: 'left', margin: '10px 0' } },
-            react_1.default.createElement("label", { htmlFor: 'firstName' },
-                react_1.default.createElement("input", { ref: fNameInputRef, placeholder: "First name" })),
-            ' ',
-            react_1.default.createElement("label", { htmlFor: 'lastName' },
-                react_1.default.createElement("input", { ref: lNameInputRef, placeholder: "Last name" })),
-            ' ',
-            react_1.default.createElement("button", { onClick: updateName }, "update customer")),
-        react_1.default.createElement("div", { style: { clear: 'both', margin: '10px 0' } },
-            react_1.default.createElement("label", null,
-                "New Phone: ",
-                react_1.default.createElement("input", { maxLength: 10, placeholder: "Empty or 10-digit integer", ref: phoneInputRef, type: "number" })),
-            ' ',
-            react_1.default.createElement("button", { onClick: updatePhone }, "update phone")),
-        react_1.default.createElement("hr", { style: { margin: '1.5rem 0' } }),
-        react_1.default.createElement("div", { style: { margin: '10px 0' } },
-            react_1.default.createElement("label", null,
-                "New Price: ",
-                react_1.default.createElement("input", { ref: priceInputRef })),
-            ' ',
-            react_1.default.createElement("button", { onClick: updatePrice }, "update price")),
-        react_1.default.createElement("div", { style: { margin: '10px 0' } },
-            react_1.default.createElement("label", null,
-                "New Color: ",
-                react_1.default.createElement("input", { ref: colorInputRef })),
-            ' ',
-            react_1.default.createElement("button", { onClick: updateColor }, "update color")),
-        react_1.default.createElement("div", { style: { margin: '10px 0' } },
-            react_1.default.createElement("label", null,
-                "New Type: ",
-                react_1.default.createElement("input", { ref: typeInputRef })),
-            ' ',
-            react_1.default.createElement("button", { onClick: updateType }, "update type"))));
-};
-Editor.displayName = 'Editor';
-exports.ConnectedEditor = (0, __1.connect)(normal_1.ObservableContext)(Editor);
-const ProductDescription = ({ data }) => {
-    (0, react_1.useEffect)(() => console.log('ProductDescription component rendered.....'));
-    return (react_1.default.createElement("div", { style: { fontSize: 24 } },
-        react_1.default.createElement("strong", null, "Description:"),
-        " ",
-        data.c,
-        " ",
-        data.t));
-};
-exports.ProductDescription = ProductDescription;
-exports.ProductDescription.displayName = 'ProductDescription';
-exports.ConnectedProductDescription = (0, __1.connect)(normal_1.ObservableContext, { c: 'color', t: 'type' })(exports.ProductDescription);
-const PriceSticker = ({ data: { p } }) => {
-    (0, react_1.useEffect)(() => console.log('PriceSticker component rendered.....'));
-    return (react_1.default.createElement("div", { style: { fontSize: 36, fontWeight: 800 } },
-        "$",
-        p.toFixed(2)));
-};
-exports.PriceSticker = PriceSticker;
-exports.PriceSticker.displayName = 'PriceSticker';
-exports.ConnectedPriceSticker = (0, __1.connect)(normal_1.ObservableContext, { p: 'price' })(exports.PriceSticker);
-const Product = ({ prehooks = undefined, type }) => {
-    const [state, setState] = (0, react_1.useState)(() => ({
-        color: 'Burgundy',
-        customer: {
-            name: { first: null, last: null },
-            phone: null
-        },
-        price: 22.5,
-        type
-    }));
-    (0, react_1.useEffect)(() => {
-        setState({ type }); // use this to update only the changed state
-        // setState({ ...state, type }); // this will override the context internal state for these values
-    }, [type]);
-    const overridePricing = (0, react_1.useCallback)(e => setState({
-        price: Number(e.target.value)
-    }), []);
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("div", { style: { marginBottom: 10 } },
-            react_1.default.createElement("label", null,
-                "$ ",
-                react_1.default.createElement("input", { onKeyUp: overridePricing, placeholder: "override price here..." }))),
-        react_1.default.createElement(normal_1.ObservableContext.Provider, { prehooks: prehooks, value: state },
-            react_1.default.createElement("div", { style: {
-                    borderBottom: '1px solid #333',
-                    marginBottom: 10,
-                    paddingBottom: 5
-                } },
-                react_1.default.createElement(exports.ConnectedEditor, null),
-                react_1.default.createElement(exports.ConnectedTallyDisplay, null)),
-            react_1.default.createElement(exports.ConnectedProductDescription, null),
-            react_1.default.createElement(exports.ConnectedPriceSticker, null))));
-};
-exports.Product = Product;
-exports.Product.displayName = 'Product';
-const App = () => {
-    const [productType, setProductType] = (0, react_1.useState)('Calculator');
-    const updateType = (0, react_1.useCallback)(e => setProductType(e.target.value), []);
-    return (react_1.default.createElement("div", { className: "App" },
-        react_1.default.createElement("h1", null, "Demo"),
-        react_1.default.createElement("h2", null, "A contrived product app."),
-        react_1.default.createElement("div", { style: { marginBottom: 10 } },
-            react_1.default.createElement("label", null,
-                "Type: ",
-                react_1.default.createElement("input", { onKeyUp: updateType, placeholder: "override product type here..." }))),
-        react_1.default.createElement(exports.Product, { type: productType })));
-};
-App.displayName = 'App';
-exports.default = App;

package/dist/main/test-apps/with-pure-children.d.ts

@@ -1,15 +0,0 @@
-import type { FC } from 'react';
-import type { Prehooks } from '../..';
-import React from 'react';
-export declare const MemoizedReset: React.NamedExoticComponent<{}>;
-export declare const MemoizedCustomerPhoneDisplay: React.NamedExoticComponent<{}>;
-export declare const MemoizedEditor: React.NamedExoticComponent<{}>;
-export declare const MemoizedProductDescription: React.NamedExoticComponent<{}>;
-export declare const MemoizedPriceSticker: React.NamedExoticComponent<{}>;
-export declare const MemoizedTallyDisplay: React.NamedExoticComponent<{}>;
-export declare const Product: FC<{
-    prehooks?: Prehooks;
-    type: string;
-}>;
-declare const App: FC;
-export default App;