How to use preact

Comprehensive preact code examples:

How to use preact.Fragment:

8
9
10
11
12
13
14
15
16
17


var _preact = require("preact");


var InternalHighlight = (0, _uiComponentsHighlightVdom.createHighlightComponent)({
  createElement: _preact.createElement,
  Fragment: _preact.Fragment
});
exports.InternalHighlight = InternalHighlight;

How to use preact.isValidElement:

5100
5101
5102
5103
5104
5105
5106
5107
5108
5109
else {
    const customContent = typeof generator === 'function' ?
        generator(renderProps, preact.createElement) :
        generator;
    if (typeof customContent === 'string' ||
        preact.isValidElement(customContent) ||
        Array.isArray(customContent)) {
        innerContent = customContent;
    }
    else if (typeof customContent === 'object') {

How to use preact.cloneElement:

84
85
86
87
88
89
90
91
92
93

    if (!cachedChildren) {
      return null
    }

    return cloneElement(cachedChildren, {
      className: classNames(className, cachedChildren.attributes.className)
    })
  }
}

How to use preact.Component:

120
121
122
123
124
125
126
/** @type {import('./typedefs')} */
module.exports = exports = h.bind(null, preact.createElement);

exports.h = exports;
exports.isVNode = isPreactNode;
exports.Component = preact.Component;
exports.render = preact.render;

How to use preact.h:

1
2
3
4
5
6
7
8
9
10
11
const renderToString = require('preact-render-to-string');
const pkg = require('./package.json');


module.exports = async function ssr({ Component, props, ssrLoadModule, javascriptFunctions }) {
  const { FunctionsContext } = await ssrLoadModule(`${pkg.name}/server`);
  const vnode = h(FunctionsContext.Provider, { value: javascriptFunctions }, h(Component.default, props));
  return {
    html: renderToString(vnode),
    css: undefined,
  };

How to use preact.createContext:

42
43
44
45
46
47
48
49
50
51
    FakeComponent.prototype.render = function () { return preact.createElement('div', {}); };
    FakeComponent.prototype.componentDidMount = function () { this.setState({}); };
    return FakeComponent;
}(preact.Component));
function createContext(defaultValue) {
    var ContextType = preact.createContext(defaultValue);
    var origProvider = ContextType.Provider;
    ContextType.Provider = function () {
        var _this = this;
        var isNew = !this.getChildContext;

How to use preact.createElement:

2535
2536
2537
2538
2539
2540
2541
2542
2543
2544
    }
}
ContentContainer.contextType = RenderId;
function InnerContentInjector(containerComponent, props) {
    const parentProps = containerComponent.props;
    return preact.createElement((ContentInjector), Object.assign({ renderProps: parentProps.renderProps, generatorName: parentProps.generatorName, customGenerator: parentProps.customGenerator, defaultGenerator: parentProps.defaultGenerator, renderId: containerComponent.context }, props));
}
// Utils
function generateClassNames(classNameGenerator, renderProps) {
    const classNames = typeof classNameGenerator === 'function' ?

How to use preact.render:

13
14
15
16
17
18
19
20
21
22
  return vdom;
};

const createSpy = (spy, Component) => {
  class Spy extends Component {
    render(...args) {
      const output = super.render(...args);
      spy._output(this, output);
      return spyWalk(spy, output);
    }

How to use preact.options:

0
1
2
3
4
5
6
7
8
9
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.forwardRef = exports.REACT_FORWARD_SYMBOL = void 0;
var preact_1 = require("preact");
var util_1 = require("./util");
var oldDiffHook = preact_1.options._diff;
preact_1.options._diff = function (vnode) {
    if (vnode.type && vnode.type._forwarded && vnode.ref) {
        vnode.props.ref = vnode.ref;
        vnode.ref = null;