;
export function jsx(
type: ComponentType
,
props: Attributes & P & { children?: ComponentChild },
key?: string
): VNode;
export function jsxs(
type: string,
props: HTMLAttributes &
SVGAttributes &
Record & { children?: ComponentChild[] },
key?: string
): VNode;
export function jsxs(
type: ComponentType
,
props: Attributes & P & { children?: ComponentChild[] },
key?: string
): VNode;
export function jsxDEV(
type: string,
props: HTMLAttributes &
SVGAttributes &
Record & { children?: ComponentChildren },
key?: string
): VNode;
export function jsxDEV(
type: ComponentType
,
props: Attributes & P & { children?: ComponentChildren },
key?: string
): VNode;
// These are not expected to be used manually, but by a JSX transform
export function jsxTemplate(
template: string[],
...expressions: any[]
): VNode;
export function jsxAttr(name: string, value: any): string | null;
export function jsxEscape(
value: T
): string | null | VNode | Array;
export { JSXInternal as JSX };
================================================
FILE: jsx-runtime/src/index.js
================================================
import { options, Fragment } from 'preact';
import { encodeEntities } from './utils';
let vnodeId = 0;
const isArray = Array.isArray;
/**
* @fileoverview
* This file exports various methods that implement Babel's "automatic" JSX runtime API:
* - jsx(type, props, key)
* - jsxs(type, props, key)
* - jsxDEV(type, props, key, __source, __self)
*
* The implementation of createVNode here is optimized for performance.
* Benchmarks: https://esbench.com/bench/5f6b54a0b4632100a7dcd2b3
*/
/**
* JSX.Element factory used by Babel's {runtime:"automatic"} JSX transform
* @param {import('../../src/internal').VNode['type']} type
* @param {import('preact').VNode['props']} props
* @param {import('preact').VNode['key']} [key]
* @param {unknown} [isStaticChildren]
* @param {unknown} [__source]
* @param {unknown} [__self]
*/
function createVNode(type, props, key, isStaticChildren, __source, __self) {
if (!props) props = {};
// We'll want to preserve `ref` in props to get rid of the need for
// forwardRef components in the future, but that should happen via
// a separate PR.
let normalizedProps = props,
ref,
i;
if ('ref' in normalizedProps && typeof type != 'function') {
normalizedProps = {};
for (i in props) {
if (i == 'ref') {
ref = props[i];
} else {
normalizedProps[i] = props[i];
}
}
}
/** @type {import('../../src/internal').VNode & { __source: any; __self: any }} */
const vnode = {
type,
props: normalizedProps,
key,
ref,
_children: null,
_parent: null,
_depth: 0,
_dom: null,
_component: null,
constructor: undefined,
_original: --vnodeId,
_index: -1,
_flags: 0,
__source,
__self
};
if (options.vnode) options.vnode(vnode);
return vnode;
}
/**
* Create a template vnode. This function is not expected to be
* used directly, but rather through a precompile JSX transform
* @param {string[]} templates
* @param {Array} exprs
* @returns {import('preact').VNode}
*/
function jsxTemplate(templates, ...exprs) {
const vnode = createVNode(Fragment, { tpl: templates, exprs });
// Bypass render to string top level Fragment optimization
// @ts-ignore
vnode.key = vnode._vnode;
return vnode;
}
const JS_TO_CSS = {};
const CSS_REGEX = /[A-Z]/g;
/**
* Unwrap potential signals.
* @param {*} value
* @returns {*}
*/
function normalizeAttrValue(value) {
return value !== null &&
typeof value === 'object' &&
typeof value.valueOf === 'function'
? value.valueOf()
: value;
}
/**
* Serialize an HTML attribute to a string. This function is not
* expected to be used directly, but rather through a precompile
* JSX transform
* @param {string} name The attribute name
* @param {*} value The attribute value
* @returns {string}
*/
function jsxAttr(name, value) {
if (options.attr) {
const result = options.attr(name, value);
if (typeof result === 'string') return result;
}
value = normalizeAttrValue(value);
if (name === 'ref' || name === 'key') return '';
if (name === 'style' && typeof value === 'object') {
let str = '';
for (let prop in value) {
let val = value[prop];
if (val != null && val !== '') {
const name =
prop[0] == '-'
? prop
: JS_TO_CSS[prop] ||
(JS_TO_CSS[prop] = prop.replace(CSS_REGEX, '-$&').toLowerCase());
str = str + name + ':' + val + ';';
}
}
return name + '="' + encodeEntities(str) + '"';
}
if (
value == null ||
value === false ||
typeof value === 'function' ||
typeof value === 'object'
) {
return '';
} else if (value === true) return name;
return name + '="' + encodeEntities('' + value) + '"';
}
/**
* Escape a dynamic child passed to `jsxTemplate`. This function
* is not expected to be used directly, but rather through a
* precompile JSX transform
* @param {*} value
* @returns {string | null | import('preact').VNode | Array}
*/
function jsxEscape(value) {
if (
value == null ||
typeof value === 'boolean' ||
typeof value === 'function'
) {
return null;
}
if (typeof value === 'object') {
// Check for VNode
if (value.constructor === undefined) return value;
if (isArray(value)) {
for (let i = 0; i < value.length; i++) {
value[i] = jsxEscape(value[i]);
}
return value;
}
}
return encodeEntities('' + value);
}
export {
createVNode as jsx,
createVNode as jsxs,
createVNode as jsxDEV,
Fragment,
// precompiled JSX transform
jsxTemplate,
jsxAttr,
jsxEscape
};
================================================
FILE: jsx-runtime/src/utils.js
================================================
const ENCODED_ENTITIES = /["&<]/;
/** @param {string} str */
export function encodeEntities(str) {
// Skip all work for strings with no entities needing encoding:
if (str.length === 0 || ENCODED_ENTITIES.test(str) === false) return str;
let last = 0,
i = 0,
out = '',
ch = '';
// Seek forward in str until the next entity char:
for (; i < str.length; i++) {
switch (str.charCodeAt(i)) {
case 34:
ch = '"';
break;
case 38:
ch = '&';
break;
case 60:
ch = '<';
break;
default:
continue;
}
// Append skipped/buffered characters and the encoded entity:
if (i !== last) out += str.slice(last, i);
out += ch;
// Start the next seek/buffer after the entity's offset:
last = i + 1;
}
if (i !== last) out += str.slice(last, i);
return out;
}
================================================
FILE: jsx-runtime/test/browser/jsx-runtime.test.js
================================================
import { Component, createElement, createRef, options } from 'preact';
import {
jsx,
jsxs,
jsxDEV,
Fragment,
jsxAttr,
jsxTemplate,
jsxEscape
} from 'preact/jsx-runtime';
import { setupScratch, teardown } from '../../../test/_util/helpers';
import { encodeEntities } from '../../src/utils';
import { vi } from 'vitest';
function createSignal(value) {
return {
value,
peek() {
return value;
},
subscribe() {
return () => {};
},
valueOf() {
return value;
},
toString() {
return String(value);
}
};
}
describe('Babel jsx/jsxDEV', () => {
let scratch;
let prevVNodeOption;
beforeEach(() => {
scratch = setupScratch();
prevVNodeOption = options.vnode;
});
afterEach(() => {
options.vnode = prevVNodeOption;
teardown(scratch);
});
it('should have needed exports', () => {
expect(typeof jsx).to.equal('function');
expect(typeof jsxs).to.equal('function');
expect(typeof jsxDEV).to.equal('function');
expect(typeof Fragment).to.equal('function');
});
it('should keep ref in props', () => {
const ref = () => null;
const props = { ref };
const vnode = jsx('div', props);
expect(vnode.ref).to.equal(ref);
expect(vnode.props).to.not.equal(props);
});
it('should not copy props wen there is no ref in props', () => {
const props = { x: 'y' };
const vnode = jsx('div', props);
expect(vnode.props).to.equal(props);
});
it('should add keys', () => {
const vnode = jsx('div', null, 'foo');
expect(vnode.key).to.equal('foo');
});
it('should set __source and __self', () => {
const vnode = jsx('div', { class: 'foo' }, 'key', false, 'source', 'self');
expect(vnode.__source).to.equal('source');
expect(vnode.__self).to.equal('self');
});
it('should return a vnode like createElement', () => {
const elementVNode = createElement('div', {
class: 'foo',
key: 'key'
});
const jsxVNode = jsx('div', { class: 'foo' }, 'key');
delete jsxVNode.__self;
delete jsxVNode.__source;
delete jsxVNode._original;
delete elementVNode._original;
expect(jsxVNode).to.deep.equal(elementVNode);
});
// #2839
it('should remove ref from props', () => {
const ref = createRef();
const vnode = jsx('div', { ref }, null);
expect(vnode.props).to.deep.equal({});
expect(vnode.ref).to.equal(ref);
});
it('should call options.vnode with the vnode', () => {
options.vnode = vi.fn();
const vnode = jsx('div', { class: 'foo' }, 'key');
expect(options.vnode).toHaveBeenCalledWith(vnode);
});
});
describe('encodeEntities', () => {
it('should encode', () => {
expect(encodeEntities("&<'")).to.equal("&<'");
});
});
describe('precompiled JSX', () => {
describe('jsxAttr', () => {
beforeEach(() => {
options.attr = undefined;
});
afterEach(() => {
options.attr = undefined;
});
it('should render simple values', () => {
expect(jsxAttr('foo', 'bar')).to.equal('foo="bar"');
});
it('should render boolean values', () => {
expect(jsxAttr('foo', true)).to.equal('foo');
expect(jsxAttr('foo', false)).to.equal('');
});
it('should ignore invalid values', () => {
expect(jsxAttr('foo', false)).to.equal('');
expect(jsxAttr('foo', null)).to.equal('');
expect(jsxAttr('foo', undefined)).to.equal('');
expect(jsxAttr('foo', () => null)).to.equal('');
expect(jsxAttr('foo', [])).to.equal('');
expect(jsxAttr('key', 'foo')).to.equal('');
expect(jsxAttr('ref', 'foo')).to.equal('');
});
it('should escape values', () => {
expect(jsxAttr('foo', "&<'")).to.equal('foo="&<\'"');
expect(jsxAttr('style', { foo: `"&<'"` })).to.equal(
'style="foo:"&<\'";"'
);
});
it('should support signals', () => {
const sig = createSignal(`&<'"`);
expect(jsxAttr('foo', sig)).to.equal(`foo="&<'""`);
expect(jsxAttr('style', sig)).to.equal(`style="&<'""`);
});
it('should call options.attr()', () => {
options.attr = (name, value) => {
return `data-${name}="foo${value}"`;
};
expect(jsxAttr('foo', 'bar')).to.equal('data-foo="foobar"');
});
it('should serialize style object', () => {
expect(jsxAttr('style', { padding: '3px' })).to.equal(
'style="padding:3px;"'
);
});
});
describe('jsxTemplate', () => {
it('should construct basic template vnode', () => {
const tpl = [`foo
`];
const vnode = jsxTemplate(tpl);
expect(vnode.props.tpl).to.equal(tpl);
expect(vnode.type).to.equal(Fragment);
expect(vnode.key).not.to.equal(null);
});
it('should constructe template vnode with expressions', () => {
const tpl = [`foo`, '
'];
const vnode = jsxTemplate(tpl, 'bar');
expect(vnode.props.tpl).to.equal(tpl);
expect(vnode.props.exprs).to.deep.equal(['bar']);
expect(vnode.type).to.equal(Fragment);
expect(vnode.key).not.to.equal(null);
});
});
describe('jsxEscape', () => {
it('should escape string children', () => {
expect(jsxEscape('foo')).to.equal('foo');
expect(jsxEscape(2)).to.equal('2');
expect(jsxEscape('&"<')).to.equal('&"<');
expect(jsxEscape(null)).to.equal(null);
expect(jsxEscape(undefined)).to.equal(null);
expect(jsxEscape(true)).to.equal(null);
expect(jsxEscape(false)).to.equal(null);
});
it("should leave VNode's as is", () => {
const vnode = jsx('div', null);
expect(jsxEscape(vnode)).to.equal(vnode);
});
it('should escape arrays', () => {
const vnode = jsx('div', null);
expect(
jsxEscape([vnode, 'foo&"<', null, undefined, true, false, 2, 'foo'])
).to.deep.equal([
vnode,
'foo&"<',
null,
null,
null,
null,
'2',
'foo'
]);
});
});
});
================================================
FILE: mangle.json
================================================
{
"help": {
"what is this file?": "It controls protected/private property mangling so that minified builds have consistent property names.",
"why are there duplicate minified properties?": "Most properties are only used on one type of objects, so they can have the same name since they will never collide. Doing this reduces size."
},
"minify": {
"mangle": {
"properties": {
"regex": "^_[^_]",
"reserved": [
"__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED",
"__REACT_DEVTOOLS_GLOBAL_HOOK__",
"__PREACT_DEVTOOLS__",
"_renderers",
"__source",
"__self"
]
}
},
"compress": {
"hoist_vars": true,
"reduce_funcs": false
}
},
"props": {
"cname": 6,
"props": {
"$_hasScuFromHooks": "__f",
"$_listeners": "__l",
"$_cleanup": "__c",
"$__hooks": "__H",
"$_hydrationMismatch": "__m",
"$_list": "__",
"$_pendingEffects": "__h",
"$_value": "__",
"$_nextValue": "__N",
"$_original": "__v",
"$_args": "__H",
"$_factory": "__h",
"$_depth": "__b",
"$_mask": "__m",
"$_detachOnNextRender": "__b",
"$_excess": "__z",
"$_nextState": "__s",
"$_renderCallbacks": "__h",
"$_stateCallbacks": "_sb",
"$_vnode": "__v",
"$_children": "__k",
"$_pendingSuspensionCount": "__u",
"$_childDidSuspend": "__c",
"$_unmounted": "__z",
"$_onResolve": "__R",
"$_suspended": "__a",
"$_dom": "__e",
"$_component": "__c",
"$_index": "__i",
"$_flags": "__u",
"$__html": "__html",
"$_parent": "__",
"$_globalContext": "__n",
"$_context": "c",
"$_defaultValue": "__",
"$_id": "__c",
"$_contextRef": "__l",
"$_parentDom": "__P",
"$_originalParentDom": "__O",
"$_prevState": "__u",
"$_root": "__",
"$_diff": "__b",
"$_commit": "__c",
"$_addHookName": "__a",
"$_render": "__r",
"$_hook": "__h",
"$_catchError": "__e",
"$_unmount": "__u",
"$_owner": "__o",
"$_skipEffects": "__s",
"$_forwarded": "__f",
"$_isSuspended": "__i",
"$_bits": "__g"
}
}
}
================================================
FILE: package.json
================================================
{
"name": "preact",
"amdName": "preact",
"version": "11.0.0-beta.1",
"private": false,
"description": "Fast 4kb React-compatible Virtual DOM library.",
"main": "dist/preact.js",
"module": "dist/preact.mjs",
"umd:main": "dist/preact.umd.js",
"source": "src/index.js",
"exports": {
".": {
"types": "./src/index.d.ts",
"module": "./dist/preact.mjs",
"umd": "./dist/preact.umd.js",
"import": "./dist/preact.mjs",
"require": "./dist/preact.js"
},
"./compat": {
"types": "./compat/src/index.d.ts",
"module": "./compat/dist/compat.mjs",
"umd": "./compat/dist/compat.umd.js",
"import": "./compat/dist/compat.mjs",
"require": "./compat/dist/compat.js"
},
"./debug": {
"types": "./debug/src/index.d.ts",
"module": "./debug/dist/debug.mjs",
"umd": "./debug/dist/debug.umd.js",
"import": "./debug/dist/debug.mjs",
"require": "./debug/dist/debug.js"
},
"./devtools": {
"types": "./devtools/src/index.d.ts",
"module": "./devtools/dist/devtools.mjs",
"umd": "./devtools/dist/devtools.umd.js",
"import": "./devtools/dist/devtools.mjs",
"require": "./devtools/dist/devtools.js"
},
"./hooks": {
"types": "./hooks/src/index.d.ts",
"module": "./hooks/dist/hooks.mjs",
"umd": "./hooks/dist/hooks.umd.js",
"import": "./hooks/dist/hooks.mjs",
"require": "./hooks/dist/hooks.js"
},
"./test-utils": {
"types": "./test-utils/src/index.d.ts",
"module": "./test-utils/dist/testUtils.mjs",
"umd": "./test-utils/dist/testUtils.umd.js",
"import": "./test-utils/dist/testUtils.mjs",
"require": "./test-utils/dist/testUtils.js"
},
"./compat/test-utils": {
"types": "./test-utils/src/index.d.ts",
"module": "./test-utils/dist/testUtils.mjs",
"umd": "./test-utils/dist/testUtils.umd.js",
"import": "./test-utils/dist/testUtils.mjs",
"require": "./test-utils/dist/testUtils.js"
},
"./jsx-runtime": {
"types": "./jsx-runtime/src/index.d.ts",
"module": "./jsx-runtime/dist/jsxRuntime.mjs",
"umd": "./jsx-runtime/dist/jsxRuntime.umd.js",
"import": "./jsx-runtime/dist/jsxRuntime.mjs",
"require": "./jsx-runtime/dist/jsxRuntime.js"
},
"./jsx-dev-runtime": {
"types": "./jsx-runtime/src/index.d.ts",
"module": "./jsx-runtime/dist/jsxRuntime.mjs",
"umd": "./jsx-runtime/dist/jsxRuntime.umd.js",
"import": "./jsx-runtime/dist/jsxRuntime.mjs",
"require": "./jsx-runtime/dist/jsxRuntime.js"
},
"./compat/client": {
"types": "./compat/client.d.ts",
"import": "./compat/client.mjs",
"require": "./compat/client.js"
},
"./compat/server": {
"types": "./compat/server.d.ts",
"browser": "./compat/server.browser.js",
"import": "./compat/server.mjs",
"require": "./compat/server.js"
},
"./compat/server.browser": {
"types": "./compat/server.d.ts",
"default": "./compat/server.browser.js"
},
"./compat/jsx-runtime": {
"types": "./jsx-runtime/src/index.d.ts",
"import": "./compat/jsx-runtime.mjs",
"require": "./compat/jsx-runtime.js"
},
"./compat/jsx-dev-runtime": {
"types": "./jsx-runtime/src/index.d.ts",
"import": "./compat/jsx-dev-runtime.mjs",
"require": "./compat/jsx-dev-runtime.js"
},
"./compat/scheduler": {
"types": "./compat/scheduler.d.ts",
"import": "./compat/scheduler.mjs",
"require": "./compat/scheduler.js"
},
"./package.json": "./package.json",
"./compat/package.json": "./compat/package.json",
"./debug/package.json": "./debug/package.json",
"./devtools/package.json": "./devtools/package.json",
"./hooks/package.json": "./hooks/package.json",
"./test-utils/package.json": "./test-utils/package.json",
"./jsx-runtime/package.json": "./jsx-runtime/package.json"
},
"license": "MIT",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/preact"
},
"types": "src/index.d.ts",
"scripts": {
"prepare": "husky && npm run test:install && run-s build",
"build": "npm-run-all --parallel 'build:*'",
"build:core": "microbundle build --raw --no-generateTypes -f cjs,esm,umd",
"build:debug": "microbundle build --raw --no-generateTypes -f cjs,esm,umd --cwd debug",
"build:devtools": "microbundle build --raw --no-generateTypes -f cjs,esm,umd --cwd devtools",
"build:hooks": "microbundle build --raw --no-generateTypes -f cjs,esm,umd --cwd hooks",
"build:test-utils": "microbundle build --raw --no-generateTypes -f cjs,esm,umd --cwd test-utils",
"build:compat": "microbundle build --raw --no-generateTypes -f cjs,esm,umd --cwd compat --globals 'preact/hooks=preactHooks'",
"build:jsx": "microbundle build --raw --no-generateTypes -f cjs,esm,umd --cwd jsx-runtime",
"postbuild": "node ./config/compat-entries.js",
"dev": "microbundle watch --raw --no-generateTypes --format cjs",
"dev:hooks": "microbundle watch --raw --no-generateTypes --format cjs --cwd hooks",
"dev:compat": "microbundle watch --raw --no-generateTypes --format cjs --cwd compat --globals 'preact/hooks=preactHooks'",
"test": "npm-run-all build lint test:unit",
"test:install": "playwright install chromium",
"test:unit": "run-p test:vitest:min test:ts",
"test:vitest": "cross-env COVERAGE=true vitest run",
"test:vitest:min": "cross-env MINIFY=true vitest run",
"test:vitest:watch": "vitest",
"test:ts": "run-p 'test:ts:*'",
"test:ts:core": "tsc -p test/ts/",
"test:ts:compat": "tsc -p compat/test/ts/",
"lint": "run-s oxlint tsc",
"tsc": "tsc -p jsconfig-lint.json",
"oxlint": "oxlint src test/browser test/node test/shared debug compat hooks test-utils",
"format": "biome format --write .",
"format:check": "biome format ."
},
"nano-staged": {
"**/*.{js,jsx,mjs,cjs,ts,tsx,yml,json,html,md,css,scss}": [
"biome format --write --no-errors-on-unmatched"
]
},
"files": [
"src",
"dist",
"compat/dist",
"compat/src",
"compat/client.d.ts",
"compat/client.js",
"compat/client.mjs",
"compat/server.d.ts",
"compat/server.browser.js",
"compat/server.js",
"compat/server.mjs",
"compat/scheduler.d.ts",
"compat/scheduler.js",
"compat/scheduler.mjs",
"compat/test-utils.js",
"compat/test-utils.mjs",
"compat/jsx-runtime.js",
"compat/jsx-runtime.mjs",
"compat/jsx-dev-runtime.js",
"compat/jsx-dev-runtime.mjs",
"compat/package.json",
"debug/dist",
"debug/src",
"debug/package.json",
"devtools/dist",
"devtools/src",
"devtools/package.json",
"hooks/dist",
"hooks/src",
"hooks/package.json",
"jsx-runtime/dist",
"jsx-runtime/src",
"jsx-runtime/package.json",
"test-utils/src",
"test-utils/package.json",
"test-utils/dist"
],
"keywords": [
"preact",
"react",
"ui",
"user interface",
"virtual dom",
"vdom",
"components",
"dom diff",
"front-end",
"framework"
],
"authors": [
"The Preact Authors (https://github.com/preactjs/preact/contributors)"
],
"repository": "preactjs/preact",
"bugs": "https://github.com/preactjs/preact/issues",
"homepage": "https://preactjs.com",
"devDependencies": {
"@actions/github": "^6.0.1",
"@actions/glob": "^0.5.0",
"@babel/core": "^7.28.0",
"@babel/plugin-transform-react-jsx": "^7.27.1",
"@babel/plugin-transform-react-jsx-source": "^7.27.1",
"@babel/preset-env": "^7.28.0",
"@babel/register": "^7.27.1",
"@biomejs/biome": "^2.1.2",
"@types/node": "^18.19.87",
"@vitest/browser": "^3.2.4",
"@vitest/coverage-v8": "^3.2.4",
"babel-plugin-transform-rename-properties": "0.1.0",
"chai": "^6.2.2",
"coveralls": "^3.1.1",
"cross-env": "^7.0.3",
"errorstacks": "^2.4.1",
"esbuild": "^0.25.8",
"husky": "^9.1.7",
"kolorist": "^1.8.0",
"microbundle": "^0.15.1",
"npm-run-all2": "^7.0.0",
"oxlint": "^1.8.0",
"playwright": "^1.54.1",
"preact-render-to-string": "^6.5.0",
"prop-types": "^15.8.1",
"sade": "^1.8.1",
"terser": "5.16.0",
"typescript": "5.1.6",
"undici": "^4.12.0",
"vite": "^6.2.0",
"vitest": "^3.2.4"
},
"volta": {
"node": "20.19.1"
}
}
================================================
FILE: scripts/release/create-gh-release.js
================================================
/**
* @typedef {import('@octokit/openapi-types').components["schemas"]["release"]} Release
*
* @typedef Params
* @property {ReturnType} github
* @property {typeof import("@actions/github").context} context
*
* @param {Params} params
* @returns {Promise}
*/
async function create({ github, context }) {
const commitSha = process.env.GITHUB_SHA;
const tag_name = process.env.GITHUB_REF_NAME;
console.log('tag:', tag_name);
let releaseResult;
let releasePages = github.paginate.iterator(
github.rest.repos.listReleases,
context.repo
);
for await (const page of releasePages) {
for (let release of page.data) {
if (release.tag_name == tag_name) {
console.log('Existing release found:', release);
releaseResult = release;
break;
}
}
}
if (!releaseResult) {
console.log('No existing release found. Creating a new draft...');
// No existing release for this tag found so let's create a release
// API Documentation: https://docs.github.com/en/rest/reference/repos#create-a-release
// Octokit Documentation: https://octokit.github.io/rest.js/v18#repos-create-release
const createReleaseRes = await github.rest.repos.createRelease({
...context.repo,
tag_name,
name: tag_name,
body: '', // TODO: Maybe run changelogged and prefill the body?
draft: true,
prerelease: tag_name.includes('-'),
target_commitish: commitSha
});
console.log('Created release:', createReleaseRes.data);
releaseResult = createReleaseRes.data;
} else if (!releaseResult.draft) {
console.error('Found existing release but it was not in draft mode');
process.exit(1);
}
return releaseResult;
}
module.exports = create;
================================================
FILE: scripts/release/publish.mjs
================================================
import { execFileSync } from 'child_process';
import fs from 'fs';
import { fetch, stream } from 'undici';
import sade from 'sade';
let DEBUG = false;
const log = {
debug: (...msgs) => DEBUG && console.log(...msgs),
info: (...msgs) => console.log(...msgs),
error: (...msgs) => console.error(...msgs)
};
/**
* @typedef {import('@octokit/openapi-types').components["schemas"]["release"]} Release
* @param {string} tag
* @param {any} opts
*/
async function main(tag, opts) {
DEBUG = opts.debug;
log.debug('Git tag:', tag);
log.debug('Options:', opts);
// 1. Find a release with the matching tag
const getReleaseByTagUrl = `https://api.github.com/repos/preactjs/preact/releases/tags/${tag}`;
const response = await fetch(getReleaseByTagUrl);
if (response.status == 404) {
log.error(
`Could not find the GitHub release for tag ${tag}. Has the release workflow finished and the GitHub release published?`
);
process.exit(1);
} else if (!response.ok) {
log.error('GitHub API returned an error:');
log.error(`${response.status} ${response.statusText}`);
log.error(await response.text());
process.exit(1);
}
const release = /** @type {Release} */ (await response.json());
log.debug('Release:', release);
if (release) {
log.info('Found release', release.id, 'at', release.html_url);
} else {
log.error(
`Could not find a release with the tag ${tag}. Please publish that tag, wait for the release workflow to complete. Then publish the release, and re-run this script.`
);
process.exit(1);
}
// 2. Find npm package release asset
/** @type {Release["assets"][0]} */
let packageAsset = null;
const artifactRegex = /^preact-.+\.tgz$/;
for (let asset of release.assets) {
if (artifactRegex.test(asset.name)) {
packageAsset = asset;
}
}
if (packageAsset) {
log.info(`Found npm package asset: ${packageAsset.name}`);
} else {
log.error(
'Could not find asset matching package regex:',
artifactRegex,
'\nPlease wait for release workflow to complete and upload npm package.'
);
process.exit(1);
}
// 3. Download release asset
log.info(`\nDownloading ${packageAsset.name}...`);
await stream(
packageAsset.browser_download_url,
{
method: 'GET',
maxRedirections: 30
},
() => fs.createWriteStream(packageAsset.name)
);
// 3. Run npm publish
const args = ['publish', packageAsset.name];
if (opts['npm-tag']) {
args.push('--tag', opts['npm-tag']);
}
log.info(`Executing \`npm ${args.join(' ')}\``);
if (!opts['dry-run']) {
execFileSync('npm', args, { encoding: 'utf8', stdio: 'inherit' });
}
}
sade('publish ', true)
.describe('Publish a tagged version of this package')
.option('--npm-tag', 'The npm tag to publish this package under', '')
.option(
'--dry-run',
"Prepare the package for publishing but don't actually publish it",
false
)
.option('--debug -d', 'Log debugging information', false)
.action(main)
.parse(process.argv);
================================================
FILE: scripts/release/upload-gh-asset.js
================================================
/**
* @typedef {import('@octokit/openapi-types').components["schemas"]["release"]} Release
*
* @typedef Params
* @property {typeof require} require
* @property {ReturnType} github
* @property {typeof import("@actions/github").context} context
* @property {typeof import("@actions/glob")} glob
* @property {Release} release
*
* @param {Params} params
*/
async function upload({ require, github, context, glob, release }) {
const fs = require('fs');
// Find artifact to upload
const artifactPattern = 'preact.tgz';
const globber = await glob.create(artifactPattern, {
matchDirectories: false
});
const results = await globber.glob();
if (results.length == 0) {
throw new Error(
`No release artifact found matching pattern: ${artifactPattern}`
);
} else if (results.length > 1) {
throw new Error(
`More than one artifact matching pattern found. Expected only one. Found ${results.length}.`
);
}
const assetPath = results[0];
const assetName = `preact-${release.tag_name.replace(/^v/, '')}.tgz`;
const assetRegex = /^preact-.+\.tgz$/;
for (let asset of release.assets) {
if (assetRegex.test(asset.name)) {
console.log(
`Found existing asset matching asset pattern: ${asset.name}. Removing...`
);
await github.rest.repos.deleteReleaseAsset({
...context.repo,
asset_id: asset.id
});
}
}
console.log(`Uploading ${assetName} from ${assetPath}...`);
// Upload a release asset
// API Documentation: https://docs.github.com/en/rest/reference/repos#upload-a-release-asset
// Octokit Documentation: https://octokit.github.io/rest.js/v18#repos-upload-release-asset
const uploadAssetResponse = await github.rest.repos.uploadReleaseAsset({
...context.repo,
release_id: release.id,
name: assetName,
data: fs.readFileSync(assetPath)
});
console.log('Asset:', uploadAssetResponse.data);
return uploadAssetResponse.data;
}
module.exports = upload;
================================================
FILE: src/clone-element.js
================================================
import { assign, slice } from './util';
import { createVNode } from './create-element';
import { NULL } from './constants';
/**
* Clones the given VNode, optionally adding attributes/props and replacing its
* children.
* @param {import('./internal').VNode} vnode The virtual DOM element to clone
* @param {object} props Attributes/props to add when cloning
* @param {Array} rest Any additional arguments will be used
* as replacement children.
* @returns {import('./internal').VNode}
*/
export function cloneElement(vnode, props, children) {
let normalizedProps = assign({}, vnode.props),
key,
ref,
i;
for (i in props) {
if (i == 'key') key = props[i];
else if (i == 'ref' && typeof vnode.type != 'function') ref = props[i];
else normalizedProps[i] = props[i];
}
if (arguments.length > 2) {
normalizedProps.children =
arguments.length > 3 ? slice.call(arguments, 2) : children;
}
return createVNode(
vnode.type,
normalizedProps,
key || vnode.key,
ref || vnode.ref,
NULL
);
}
================================================
FILE: src/component.js
================================================
import {
COMPONENT_DIRTY,
COMPONENT_FORCE,
MODE_HYDRATE,
NULL
} from './constants';
import { Fragment } from './create-element';
import { commitRoot, diff } from './diff/index';
import options from './options';
import { assign } from './util';
/**
* Base Component class. Provides `setState()` and `forceUpdate()`, which
* trigger rendering
* @param {object} props The initial component props
* @param {object} context The initial context from parent components'
* getChildContext
*/
export function BaseComponent(props, context) {
this.props = props;
this.context = context;
this._bits = 0;
}
/**
* Update component state and schedule a re-render.
* @this {import('./internal').Component}
* @param {object | ((s: object, p: object) => object)} update A hash of state
* properties to update with new values or a function that given the current
* state and props returns a new partial state
* @param {() => void} [callback] A function to be called once component state is
* updated
*/
BaseComponent.prototype.setState = function (update, callback) {
// only clone state when copying to nextState the first time.
let s;
if (this._nextState != NULL && this._nextState != this.state) {
s = this._nextState;
} else {
s = this._nextState = assign({}, this.state);
}
if (typeof update == 'function') {
// Some libraries like `immer` mark the current state as readonly,
// preventing us from mutating it, so we need to clone it. See #2716
update = update(assign({}, s), this.props);
}
if (update) {
assign(s, update);
} else {
return;
}
if (this._vnode) {
if (callback) {
this._stateCallbacks.push(callback);
}
enqueueRender(this);
}
};
/**
* Immediately perform a synchronous re-render of the component
* @this {import('./internal').Component}
* @param {() => void} [callback] A function to be called after component is
* re-rendered
*/
BaseComponent.prototype.forceUpdate = function (callback) {
if (this._vnode) {
// Set render mode so that we can differentiate where the render request
// is coming from. We need this because forceUpdate should never call
// shouldComponentUpdate
this._bits |= COMPONENT_FORCE;
if (callback) this._renderCallbacks.push(callback);
enqueueRender(this);
}
};
/**
* Accepts `props` and `state`, and returns a new Virtual DOM tree to build.
* Virtual DOM is generally constructed via [JSX](https://jasonformat.com/wtf-is-jsx).
* @param {object} props Props (eg: JSX attributes) received from parent
* element/component
* @param {object} state The component's current state
* @param {object} context Context object, as returned by the nearest
* ancestor's `getChildContext()`
* @returns {ComponentChildren | void}
*/
BaseComponent.prototype.render = Fragment;
/**
* @param {import('./internal').VNode} vnode
* @param {number | null} [childIndex]
*/
export function getDomSibling(vnode, childIndex) {
if (childIndex == NULL) {
// Use childIndex==null as a signal to resume the search from the vnode's sibling
return vnode._parent
? getDomSibling(vnode._parent, vnode._index + 1)
: NULL;
}
let sibling;
for (; childIndex < vnode._children.length; childIndex++) {
sibling = vnode._children[childIndex];
if (sibling != NULL && sibling._dom != NULL) {
// Since updateParentDomPointers keeps _dom pointer correct,
// we can rely on _dom to tell us if this subtree contains a
// rendered DOM node, and what the first rendered DOM node is
return sibling._dom;
}
}
// If we get here, we have not found a DOM node in this vnode's children.
// We must resume from this vnode's sibling (in it's parent _children array)
// Only climb up and search the parent if we aren't searching through a DOM
// VNode (meaning we reached the DOM parent of the original vnode that began
// the search)
return typeof vnode.type == 'function' ? getDomSibling(vnode) : NULL;
}
/**
* Trigger in-place re-rendering of a component.
* @param {import('./internal').Component} component The component to rerender
*/
function renderComponent(component) {
const oldVNode = component._vnode,
oldDom = oldVNode._dom,
commitQueue = [],
refQueue = [];
const parentDom = component._parentDom;
if (parentDom) {
const newVNode = assign({}, oldVNode);
newVNode._original = oldVNode._original + 1;
if (options.vnode) options.vnode(newVNode);
diff(
parentDom,
newVNode,
oldVNode,
component._globalContext,
parentDom.namespaceURI,
oldVNode._flags & MODE_HYDRATE ? [oldDom] : NULL,
commitQueue,
oldDom == NULL ? getDomSibling(oldVNode) : oldDom,
!!(oldVNode._flags & MODE_HYDRATE),
refQueue,
parentDom.ownerDocument
);
newVNode._original = oldVNode._original;
newVNode._parent._children[newVNode._index] = newVNode;
commitRoot(commitQueue, newVNode, refQueue);
oldVNode._parent = oldVNode._dom = NULL;
if (newVNode._dom != oldDom) {
updateParentDomPointers(newVNode);
}
}
}
/**
* @param {import('./internal').VNode} vnode
*/
function updateParentDomPointers(vnode) {
if ((vnode = vnode._parent) != NULL && vnode._component != NULL) {
vnode._dom = NULL;
vnode._children.some(child => {
if (child != NULL && child._dom != NULL) {
return (vnode._dom = child._dom);
}
});
return updateParentDomPointers(vnode);
}
}
/**
* The render queue
* @type {Array}
*/
const rerenderQueue = [];
/*
* The value of `Component.debounce` must asynchronously invoke the passed in callback. It is
* important that contributors to Preact can consistently reason about what calls to `setState`, etc.
* do, and when their effects will be applied. See the links below for some further reading on designing
* asynchronous APIs.
* * [Designing APIs for Asynchrony](https://blog.izs.me/2013/08/designing-apis-for-asynchrony)
* * [Callbacks synchronous and asynchronous](https://blog.ometer.com/2011/07/24/callbacks-synchronous-and-asynchronous/)
*/
let prevDebounce,
rerenderCount = 0;
export function resetRenderCount() {
rerenderCount = 0;
}
/**
* Enqueue a rerender of a component
* @param {import('./internal').Component} c The component to rerender
*/
export function enqueueRender(c) {
if (
(!(c._bits & COMPONENT_DIRTY) &&
(c._bits |= COMPONENT_DIRTY) &&
rerenderQueue.push(c) &&
!rerenderCount++) ||
prevDebounce != options.debounceRendering
) {
prevDebounce = options.debounceRendering;
(prevDebounce || queueMicrotask)(process);
}
}
/**
* @param {import('./internal').Component} a
* @param {import('./internal').Component} b
*/
const depthSort = (a, b) => a._vnode._depth - b._vnode._depth;
/** Flush the render queue by rerendering all queued components */
function process() {
try {
let c,
l = 1;
// Don't update `renderCount` yet. Keep its value non-zero to prevent unnecessary
// process() calls from getting scheduled while `queue` is still being consumed.
while (rerenderQueue.length) {
// Keep the rerender queue sorted by (depth, insertion order). The queue
// will initially be sorted on the first iteration only if it has more than 1 item.
//
// New items can be added to the queue e.g. when rerendering a provider, so we want to
// keep the order from top to bottom with those new items so we can handle them in a
// single pass
if (rerenderQueue.length > l) {
rerenderQueue.sort(depthSort);
}
c = rerenderQueue.shift();
l = rerenderQueue.length;
if (c._bits & COMPONENT_DIRTY) {
renderComponent(c);
}
}
} finally {
rerenderQueue.length = rerenderCount = 0;
}
}
================================================
FILE: src/constants.js
================================================
// Vnode._flags
/** Normal hydration that attaches to a DOM tree but does not diff it. */
export const MODE_HYDRATE = 1 << 5;
/** Signifies this VNode suspended on the previous render */
export const MODE_SUSPENDED = 1 << 7;
/** Indicates that this node needs to be inserted while patching children */
export const INSERT_VNODE = 1 << 2;
/** Indicates a VNode has been matched with another VNode in the diff */
export const MATCHED = 1 << 1;
/** Indicates that this vnode has been unmounted before indicating the loss of event listeners */
export const FORCE_PROPS_REVALIDATE = 1 << 0;
// component._bits
/** Component is processing an exception */
export const COMPONENT_PROCESSING_EXCEPTION = 1 << 0;
/** Component has a pending error */
export const COMPONENT_PENDING_ERROR = 1 << 1;
/** Component should force update (skip shouldComponentUpdate) */
export const COMPONENT_FORCE = 1 << 2;
/** Component is queued for update */
export const COMPONENT_DIRTY = 1 << 3;
/** Reset all mode flags */
export const RESET_MODE = ~(MODE_HYDRATE | MODE_SUSPENDED);
export const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
export const XHTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';
export const MATH_NAMESPACE = 'http://www.w3.org/1998/Math/MathML';
export const NULL = null;
export const UNDEFINED = undefined;
export const EMPTY_OBJ = /** @type {any} */ ({});
export const EMPTY_ARR = [];
export const MATHML_TOKEN_ELEMENTS = /(mi|mn|mo|ms$|mte|msp)/;
================================================
FILE: src/create-context.js
================================================
import { enqueueRender } from './component';
import { NULL, COMPONENT_FORCE } from './constants';
export let i = 0;
export function createContext(defaultValue) {
function Context(props) {
if (!this.getChildContext) {
/** @type {Set | null} */
let subs = new Set();
let ctx = {};
ctx[Context._id] = this;
this.getChildContext = () => ctx;
this.componentWillUnmount = () => {
subs = NULL;
};
this.shouldComponentUpdate = function (_props) {
// @ts-expect-error even
if (this.props.value != _props.value) {
subs.forEach(c => {
c._bits |= COMPONENT_FORCE;
enqueueRender(c);
});
}
};
this.sub = c => {
subs.add(c);
let old = c.componentWillUnmount;
c.componentWillUnmount = () => {
if (subs) {
subs.delete(c);
}
if (old) old.call(c);
};
};
}
return props.children;
}
Context._id = '__cC' + i++;
Context._defaultValue = defaultValue;
/** @type {import('./internal').FunctionComponent} */
Context.Consumer = (props, contextValue) => {
return props.children(contextValue);
};
// we could also get rid of _contextRef entirely
Context.Provider =
Context._contextRef =
Context.Consumer.contextType =
Context;
return Context;
}
================================================
FILE: src/create-element.js
================================================
import { slice } from './util';
import options from './options';
import { NULL, UNDEFINED } from './constants';
let vnodeId = 0;
/**
* Create an virtual node (used for JSX)
* @param {import('./internal').VNode["type"]} type The node name or Component constructor for this
* virtual node
* @param {object | null | undefined} [props] The properties of the virtual node
* @param {Array} [children] The children of the
* virtual node
* @returns {import('./internal').VNode}
*/
export function createElement(type, props, children) {
let normalizedProps = {},
key,
ref,
i;
for (i in props) {
if (i == 'key') key = props[i];
else if (i == 'ref' && typeof type != 'function') ref = props[i];
else normalizedProps[i] = props[i];
}
if (arguments.length > 2) {
normalizedProps.children =
arguments.length > 3 ? slice.call(arguments, 2) : children;
}
return createVNode(type, normalizedProps, key, ref, NULL);
}
/**
* Create a VNode (used internally by Preact)
* @param {import('./internal').VNode["type"]} type The node name or Component
* Constructor for this virtual node
* @param {object | string | number | null} props The properties of this virtual node.
* If this virtual node represents a text node, this is the text of the node (string or number).
* @param {string | number | null} key The key for this virtual node, used when
* diffing it against its children
* @param {import('./internal').VNode["ref"]} ref The ref property that will
* receive a reference to its created child
* @returns {import('./internal').VNode}
*/
export function createVNode(type, props, key, ref, original) {
// V8 seems to be better at detecting type shapes if the object is allocated from the same call site
// Do not inline into createElement and coerceToVNode!
/** @type {import('./internal').VNode} */
const vnode = {
type,
props,
key,
ref,
_children: NULL,
_parent: NULL,
_depth: 0,
_dom: NULL,
_component: NULL,
constructor: UNDEFINED,
_original: original == NULL ? ++vnodeId : original,
_index: -1,
_flags: 0
};
// Only invoke the vnode hook if this was *not* a direct copy:
if (original == NULL && options.vnode != NULL) options.vnode(vnode);
return vnode;
}
export function createRef() {
return { current: NULL };
}
export function Fragment(props) {
return props.children;
}
/**
* Check if a the argument is a valid Preact VNode.
* @param {*} vnode
* @returns {vnode is VNode}
*/
export const isValidElement = vnode =>
vnode != NULL && vnode.constructor === UNDEFINED;
================================================
FILE: src/diff/catch-error.js
================================================
import { resetRenderCount } from '../component';
import {
NULL,
COMPONENT_DIRTY,
COMPONENT_PENDING_ERROR,
COMPONENT_PROCESSING_EXCEPTION,
COMPONENT_FORCE
} from '../constants';
/**
* Find the closest error boundary to a thrown error and call it
* @param {object} error The thrown value
* @param {import('../internal').VNode} vnode The vnode that threw the error that was caught (except
* for unmounting when this parameter is the highest parent that was being
* unmounted)
* @param {import('../internal').VNode} [oldVNode]
* @param {import('../internal').ErrorInfo} [errorInfo]
*/
export function _catchError(error, vnode, oldVNode, errorInfo) {
/** @type {import('../internal').Component} */
let component,
/** @type {import('../internal').ComponentType} */
ctor,
/** @type {number} */
handled;
for (; (vnode = vnode._parent); ) {
if (
(component = vnode._component) &&
!(component._bits & COMPONENT_PROCESSING_EXCEPTION)
) {
component._bits |= COMPONENT_FORCE;
try {
ctor = component.constructor;
if (ctor && ctor.getDerivedStateFromError != NULL) {
component.setState(ctor.getDerivedStateFromError(error));
handled = component._bits & COMPONENT_DIRTY;
}
if (component.componentDidCatch != NULL) {
component.componentDidCatch(error, errorInfo || {});
handled = component._bits & COMPONENT_DIRTY;
}
// This is an error boundary. Mark it as having bailed out, and whether it was mid-hydration.
if (handled) {
component._bits |= COMPONENT_PENDING_ERROR;
return;
}
} catch (e) {
error = e;
}
}
}
// Reset rerender count to 0, so that the next render will not be skipped
// when we leverage prefresh
resetRenderCount();
throw error;
}
================================================
FILE: src/diff/children.js
================================================
import { diff, unmount, applyRef } from './index';
import { createVNode, Fragment } from '../create-element';
import {
EMPTY_OBJ,
EMPTY_ARR,
INSERT_VNODE,
MATCHED,
UNDEFINED,
NULL
} from '../constants';
import { isArray } from '../util';
import { getDomSibling } from '../component';
/**
* @typedef {import('../internal').ComponentChildren} ComponentChildren
* @typedef {import('../internal').Component} Component
* @typedef {import('../internal').PreactElement} PreactElement
* @typedef {import('../internal').VNode} VNode
*/
/**
* Diff the children of a virtual node
* @param {PreactElement} parentDom The DOM element whose children are being
* diffed
* @param {ComponentChildren[]} renderResult
* @param {VNode} newParentVNode The new virtual node whose children should be
* diff'ed against oldParentVNode
* @param {VNode} oldParentVNode The old virtual node whose children should be
* diff'ed against newParentVNode
* @param {object} globalContext The current context object - modified by
* getChildContext
* @param {string} namespace Current namespace of the DOM node (HTML, SVG, or MathML)
* @param {Array} excessDomChildren
* @param {Array} commitQueue List of components which have callbacks
* to invoke in commitRoot
* @param {PreactElement} oldDom The current attached DOM element any new dom
* elements should be placed around. Likely `null` on first render (except when
* hydrating). Can be a sibling DOM element when diffing Fragments that have
* siblings. In most cases, it starts out as `oldChildren[0]._dom`.
* @param {boolean} isHydrating Whether or not we are in hydration
* @param {any[]} refQueue an array of elements needed to invoke refs
* @param {Document} doc The document object to use for creating elements
* @returns {PreactElement} The next sibling DOM element to insert new elements
*/
export function diffChildren(
parentDom,
renderResult,
newParentVNode,
oldParentVNode,
globalContext,
namespace,
excessDomChildren,
commitQueue,
oldDom,
isHydrating,
refQueue,
doc
) {
let i,
/** @type {VNode} */
oldVNode,
/** @type {VNode} */
childVNode,
/** @type {PreactElement} */
newDom,
/** @type {PreactElement} */
firstChildDom;
// This is a compression of oldParentVNode!=null && oldParentVNode != EMPTY_OBJ && oldParentVNode._children || EMPTY_ARR
// as EMPTY_OBJ._children should be `undefined`.
/** @type {VNode[]} */
let oldChildren = (oldParentVNode && oldParentVNode._children) || EMPTY_ARR;
let newChildrenLength = renderResult.length;
oldDom = constructNewChildrenArray(
newParentVNode,
renderResult,
oldChildren,
oldDom,
newChildrenLength
);
for (i = 0; i < newChildrenLength; i++) {
childVNode = newParentVNode._children[i];
if (childVNode == NULL) continue;
// At this point, constructNewChildrenArray has assigned _index to be the
// matchingIndex for this VNode's oldVNode (or -1 if there is no oldVNode).
oldVNode =
(childVNode._index != -1 && oldChildren[childVNode._index]) || EMPTY_OBJ;
// Update childVNode._index to its final index
childVNode._index = i;
// Morph the old element into the new one, but don't append it to the dom yet
let result = diff(
parentDom,
childVNode,
oldVNode,
globalContext,
namespace,
excessDomChildren,
commitQueue,
oldDom,
isHydrating,
refQueue,
doc
);
// Adjust DOM nodes
newDom = childVNode._dom;
if (childVNode.ref && oldVNode.ref != childVNode.ref) {
if (oldVNode.ref) {
applyRef(oldVNode.ref, NULL, childVNode);
}
refQueue.push(
childVNode.ref,
childVNode._component || newDom,
childVNode
);
}
if (firstChildDom == NULL && newDom != NULL) {
firstChildDom = newDom;
}
let shouldPlace = childVNode._flags & INSERT_VNODE;
if (shouldPlace || oldVNode._children === childVNode._children) {
oldDom = insert(childVNode, oldDom, parentDom, shouldPlace);
} else if (typeof childVNode.type == 'function' && result !== UNDEFINED) {
oldDom = result;
} else if (newDom) {
oldDom = newDom.nextSibling;
}
// Unset diffing flags
childVNode._flags &= ~(INSERT_VNODE | MATCHED);
}
newParentVNode._dom = firstChildDom;
return oldDom;
}
/**
* @param {VNode} newParentVNode
* @param {ComponentChildren[]} renderResult
* @param {VNode[]} oldChildren
*/
function constructNewChildrenArray(
newParentVNode,
renderResult,
oldChildren,
oldDom,
newChildrenLength
) {
/** @type {number} */
let i;
/** @type {VNode} */
let childVNode;
/** @type {VNode} */
let oldVNode;
let oldChildrenLength = oldChildren.length,
remainingOldChildren = oldChildrenLength;
let skew = 0;
newParentVNode._children = new Array(newChildrenLength);
for (i = 0; i < newChildrenLength; i++) {
// @ts-expect-error We are reusing the childVNode variable to hold both the
// pre and post normalized childVNode
childVNode = renderResult[i];
if (
childVNode == NULL ||
typeof childVNode == 'boolean' ||
typeof childVNode == 'function'
) {
newParentVNode._children[i] = NULL;
continue;
}
// If this newVNode is being reused (e.g. {reuse}{reuse}
) in the same diff,
// or we are rendering a component (e.g. setState) copy the oldVNodes so it can have
// it's own DOM & etc. pointers
else if (
typeof childVNode == 'string' ||
typeof childVNode == 'number' ||
// eslint-disable-next-line valid-typeof
typeof childVNode == 'bigint' ||
childVNode.constructor == String
) {
childVNode = newParentVNode._children[i] = createVNode(
NULL,
childVNode,
NULL,
NULL,
NULL
);
} else if (isArray(childVNode)) {
childVNode = newParentVNode._children[i] = createVNode(
Fragment,
{ children: childVNode },
NULL,
NULL,
NULL
);
} else if (childVNode.constructor === UNDEFINED && childVNode._depth > 0) {
// VNode is already in use, clone it. This can happen in the following
// scenario:
// const reuse =
// {reuse}{reuse}
childVNode = newParentVNode._children[i] = createVNode(
childVNode.type,
childVNode.props,
childVNode.key,
childVNode.ref ? childVNode.ref : NULL,
childVNode._original
);
} else {
newParentVNode._children[i] = childVNode;
}
const skewedIndex = i + skew;
childVNode._parent = newParentVNode;
childVNode._depth = newParentVNode._depth + 1;
// Temporarily store the matchingIndex on the _index property so we can pull
// out the oldVNode in diffChildren. We'll override this to the VNode's
// final index after using this property to get the oldVNode
const matchingIndex = (childVNode._index = findMatchingIndex(
childVNode,
oldChildren,
skewedIndex,
remainingOldChildren
));
oldVNode = NULL;
if (matchingIndex != -1) {
oldVNode = oldChildren[matchingIndex];
remainingOldChildren--;
if (oldVNode) {
oldVNode._flags |= MATCHED;
}
}
// Here, we define isMounting for the purposes of the skew diffing
// algorithm. Nodes that are unsuspending are considered mounting and we detect
// this by checking if oldVNode._original == null
if (oldVNode == NULL || oldVNode._original == NULL) {
if (matchingIndex == -1) {
// When the array of children is growing we need to decrease the skew
// as we are adding a new element to the array.
// Example:
// [1, 2, 3] --> [0, 1, 2, 3]
// oldChildren newChildren
//
// The new element is at index 0, so our skew is 0,
// we need to decrease the skew as we are adding a new element.
// The decrease will cause us to compare the element at position 1
// with value 1 with the element at position 0 with value 0.
//
// A linear concept is applied when the array is shrinking,
// if the length is unchanged we can assume that no skew
// changes are needed.
if (newChildrenLength > oldChildrenLength) {
skew--;
} else if (newChildrenLength < oldChildrenLength) {
skew++;
}
}
// If we are mounting a DOM VNode, mark it for insertion
if (typeof childVNode.type != 'function') {
childVNode._flags |= INSERT_VNODE;
}
} else if (matchingIndex != skewedIndex) {
// When we move elements around i.e. [0, 1, 2] --> [1, 0, 2]
// --> we diff 1, we find it at position 1 while our skewed index is 0 and our skew is 0
// we set the skew to 1 as we found an offset.
// --> we diff 0, we find it at position 0 while our skewed index is at 2 and our skew is 1
// this makes us increase the skew again.
// --> we diff 2, we find it at position 2 while our skewed index is at 4 and our skew is 2
//
// this becomes an optimization question where currently we see a 1 element offset as an insertion
// or deletion i.e. we optimize for [0, 1, 2] --> [9, 0, 1, 2]
// while a more than 1 offset we see as a swap.
// We could probably build heuristics for having an optimized course of action here as well, but
// might go at the cost of some bytes.
//
// If we wanted to optimize for i.e. only swaps we'd just do the last two code-branches and have
// only the first item be a re-scouting and all the others fall in their skewed counter-part.
// We could also further optimize for swaps
if (matchingIndex == skewedIndex - 1) {
skew--;
} else if (matchingIndex == skewedIndex + 1) {
skew++;
} else {
if (matchingIndex > skewedIndex) {
skew--;
} else {
skew++;
}
// Move this VNode's DOM if the original index (matchingIndex) doesn't
// match the new skew index (i + new skew)
// In the former two branches we know that it matches after skewing
childVNode._flags |= INSERT_VNODE;
}
}
}
// Remove remaining oldChildren if there are any. Loop forwards so that as we
// unmount DOM from the beginning of the oldChildren, we can adjust oldDom to
// point to the next child, which needs to be the first DOM node that won't be
// unmounted.
if (remainingOldChildren) {
for (i = 0; i < oldChildrenLength; i++) {
oldVNode = oldChildren[i];
if (oldVNode != NULL && (oldVNode._flags & MATCHED) == 0) {
if (oldVNode._dom == oldDom) {
oldDom = getDomSibling(oldVNode);
}
unmount(oldVNode, oldVNode);
}
}
}
return oldDom;
}
/**
* @param {VNode} parentVNode
* @param {PreactElement} oldDom
* @param {PreactElement} parentDom
* @param {number} shouldPlace
* @returns {PreactElement}
*/
function insert(parentVNode, oldDom, parentDom, shouldPlace) {
// Note: VNodes in nested suspended trees may be missing _children.
if (typeof parentVNode.type == 'function') {
let children = parentVNode._children;
for (let i = 0; children && i < children.length; i++) {
if (children[i]) {
// If we enter this code path on sCU bailout, where we copy
// oldVNode._children to newVNode._children, we need to update the old
// children's _parent pointer to point to the newVNode (parentVNode
// here).
children[i]._parent = parentVNode;
oldDom = insert(children[i], oldDom, parentDom, shouldPlace);
}
}
return oldDom;
} else if (parentVNode._dom != oldDom) {
if (shouldPlace) {
if (oldDom && parentVNode.type && !oldDom.parentNode) {
oldDom = getDomSibling(parentVNode);
}
parentDom.insertBefore(parentVNode._dom, oldDom || NULL);
}
oldDom = parentVNode._dom;
}
do {
oldDom = oldDom && oldDom.nextSibling;
} while (oldDom != NULL && oldDom.nodeType == 8);
return oldDom;
}
/**
* Flatten and loop through the children of a virtual node
* @param {ComponentChildren} children The unflattened children of a virtual
* node
* @returns {VNode[]}
*/
export function toChildArray(children, out) {
out = out || [];
if (children == NULL || typeof children == 'boolean') {
} else if (isArray(children)) {
children.some(child => {
toChildArray(child, out);
});
} else {
out.push(children);
}
return out;
}
/**
* @param {VNode} childVNode
* @param {VNode[]} oldChildren
* @param {number} skewedIndex
* @param {number} remainingOldChildren
* @returns {number}
*/
function findMatchingIndex(
childVNode,
oldChildren,
skewedIndex,
remainingOldChildren
) {
const key = childVNode.key;
const type = childVNode.type;
let oldVNode = oldChildren[skewedIndex];
const matched = oldVNode != NULL && (oldVNode._flags & MATCHED) == 0;
// We only need to perform a search if there are more children
// (remainingOldChildren) to search. However, if the oldVNode we just looked
// at skewedIndex was not already used in this diff, then there must be at
// least 1 other (so greater than 1) remainingOldChildren to attempt to match
// against. So the following condition checks that ensuring
// remainingOldChildren > 1 if the oldVNode is not already used/matched. Else
// if the oldVNode was null or matched, then there could needs to be at least
// 1 (aka `remainingOldChildren > 0`) children to find and compare against.
//
// If there is an unkeyed functional VNode, that isn't a built-in like our Fragment,
// we should not search as we risk re-using state of an unrelated VNode. (reverted for now)
let shouldSearch =
// (typeof type != 'function' || type === Fragment || key) &&
remainingOldChildren > (matched ? 1 : 0);
if (
(oldVNode === NULL && key == null) ||
(matched && key == oldVNode.key && type == oldVNode.type)
) {
return skewedIndex;
} else if (shouldSearch) {
let x = skewedIndex - 1;
let y = skewedIndex + 1;
while (x >= 0 || y < oldChildren.length) {
const childIndex = x >= 0 ? x-- : y++;
oldVNode = oldChildren[childIndex];
if (
oldVNode != NULL &&
(oldVNode._flags & MATCHED) == 0 &&
key == oldVNode.key &&
type == oldVNode.type
) {
return childIndex;
}
}
}
return -1;
}
================================================
FILE: src/diff/index.js
================================================
import { BaseComponent, getDomSibling } from '../component';
import {
COMPONENT_DIRTY,
COMPONENT_FORCE,
COMPONENT_PENDING_ERROR,
COMPONENT_PROCESSING_EXCEPTION,
EMPTY_ARR,
EMPTY_OBJ,
FORCE_PROPS_REVALIDATE,
MATHML_TOKEN_ELEMENTS,
MATH_NAMESPACE,
MODE_HYDRATE,
MODE_SUSPENDED,
NULL,
RESET_MODE,
SVG_NAMESPACE,
UNDEFINED,
XHTML_NAMESPACE
} from '../constants';
import { Fragment } from '../create-element';
import options from '../options';
import { assign, isArray, removeNode, slice } from '../util';
import { diffChildren } from './children';
import { setProperty } from './props';
/**
* @typedef {import('../internal').ComponentType} ComponentType
* @typedef {import('../internal').ComponentChildren} ComponentChildren
* @typedef {import('../internal').Component} Component
* @typedef {import('../internal').PreactElement} PreactElement
* @typedef {import('../internal').VNode} VNode
*/
/**
* @template {any} T
* @typedef {import('../internal').Ref} Ref
*/
/**
* Diff two virtual nodes and apply proper changes to the DOM
* @param {PreactElement} parentDom The parent of the DOM element
* @param {VNode} newVNode The new virtual node
* @param {VNode} oldVNode The old virtual node
* @param {object} globalContext The current context object. Modified by
* getChildContext
* @param {string} namespace Current namespace of the DOM node (HTML, SVG, or MathML)
* @param {Array} excessDomChildren
* @param {Array} commitQueue List of components which have callbacks
* to invoke in commitRoot
* @param {PreactElement} oldDom The current attached DOM element any new dom
* elements should be placed around. Likely `null` on first render (except when
* hydrating). Can be a sibling DOM element when diffing Fragments that have
* siblings. In most cases, it starts out as `oldChildren[0]._dom`.
* @param {boolean} isHydrating Whether or not we are in hydration
* @param {any[]} refQueue an array of elements needed to invoke refs
* @param {Document} doc The document object to use for creating elements
*/
export function diff(
parentDom,
newVNode,
oldVNode,
globalContext,
namespace,
excessDomChildren,
commitQueue,
oldDom,
isHydrating,
refQueue,
doc
) {
/** @type {any} */
let tmp,
newType = newVNode.type;
// When passing through createElement it assigns the object
// constructor as undefined. This to prevent JSON-injection.
if (newVNode.constructor !== UNDEFINED) return NULL;
// If the previous diff bailed out, resume creating/hydrating.
if (
oldVNode._flags & MODE_SUSPENDED &&
// @ts-expect-error This is 1 or 0 (true or false)
(isHydrating = oldVNode._flags & MODE_HYDRATE) &&
oldVNode._component._excess
) {
excessDomChildren = oldVNode._component._excess;
oldDom = excessDomChildren[0];
oldVNode._component._excess = NULL;
}
if ((tmp = options._diff)) tmp(newVNode);
outer: if (typeof newType == 'function') {
try {
let c,
oldProps,
oldState,
snapshot,
newProps = newVNode.props;
const isClassComponent = newType.prototype && newType.prototype.render;
// Necessary for createContext api. Setting this property will pass
// the context value as `this.context` just for this component.
tmp = newType.contextType;
const provider = tmp && globalContext[tmp._id];
const componentContext = tmp
? provider
? provider.props.value
: tmp._defaultValue
: globalContext;
// Get component and set it to `c`
if (oldVNode._component) {
c = newVNode._component = oldVNode._component;
if (c._bits & COMPONENT_PENDING_ERROR) {
c._bits |= COMPONENT_PROCESSING_EXCEPTION;
}
} else {
// Instantiate the new component
if (isClassComponent) {
// @ts-expect-error Trust me, Component implements the interface we want
newVNode._component = c = new newType(newProps, componentContext); // eslint-disable-line new-cap
} else {
// @ts-expect-error Trust me, Component implements the interface we want
newVNode._component = c = new BaseComponent(
newProps,
componentContext
);
c.constructor = newType;
c.render = doRender;
}
if (provider) provider.sub(c);
if (!c.state) c.state = {};
c._globalContext = globalContext;
c._bits |= COMPONENT_DIRTY;
c._renderCallbacks = [];
c._stateCallbacks = [];
}
// Invoke getDerivedStateFromProps
if (isClassComponent && c._nextState == NULL) {
c._nextState = c.state;
}
if (isClassComponent && newType.getDerivedStateFromProps != NULL) {
if (c._nextState == c.state) {
c._nextState = assign({}, c._nextState);
}
assign(
c._nextState,
newType.getDerivedStateFromProps(newProps, c._nextState)
);
}
oldProps = c.props;
oldState = c.state;
c._vnode = newVNode;
// Invoke pre-render lifecycle methods
if (!oldVNode._component) {
if (
isClassComponent &&
newType.getDerivedStateFromProps == NULL &&
c.componentWillMount != NULL
) {
c.componentWillMount();
}
if (isClassComponent && c.componentDidMount != NULL) {
c._renderCallbacks.push(c.componentDidMount);
}
} else {
if (
isClassComponent &&
newType.getDerivedStateFromProps == NULL &&
newProps !== oldProps &&
c.componentWillReceiveProps != NULL
) {
c.componentWillReceiveProps(newProps, componentContext);
}
if (
newVNode._original == oldVNode._original ||
(!(c._bits & COMPONENT_FORCE) &&
c.shouldComponentUpdate != NULL &&
c.shouldComponentUpdate(
newProps,
c._nextState,
componentContext
) === false)
) {
// More info about this here: https://gist.github.com/JoviDeCroock/bec5f2ce93544d2e6070ef8e0036e4e8
if (newVNode._original != oldVNode._original) {
// When we are dealing with a bail because of sCU we have to update
// the props, state and dirty-state.
// when we are dealing with strict-equality we don't as the child could still
// be dirtied see #3883
c.props = newProps;
c.state = c._nextState;
c._bits &= ~COMPONENT_DIRTY;
}
newVNode._dom = oldVNode._dom;
newVNode._children = oldVNode._children;
newVNode._children.some(vnode => {
if (vnode) vnode._parent = newVNode;
});
EMPTY_ARR.push.apply(c._renderCallbacks, c._stateCallbacks);
c._stateCallbacks = [];
if (c._renderCallbacks.length) {
commitQueue.push(c);
}
break outer;
}
if (c.componentWillUpdate != NULL) {
c.componentWillUpdate(newProps, c._nextState, componentContext);
}
if (isClassComponent && c.componentDidUpdate != NULL) {
c._renderCallbacks.push(() => {
c.componentDidUpdate(oldProps, oldState, snapshot);
});
}
}
c.context = componentContext;
c.props = newProps;
c._parentDom = parentDom;
c._bits &= ~COMPONENT_FORCE;
let renderHook = options._render,
count = 0;
if (isClassComponent) {
c.state = c._nextState;
c._bits &= ~COMPONENT_DIRTY;
if (renderHook) renderHook(newVNode);
tmp = c.render(c.props, c.state, c.context);
EMPTY_ARR.push.apply(c._renderCallbacks, c._stateCallbacks);
c._stateCallbacks = [];
} else {
do {
c._bits &= ~COMPONENT_DIRTY;
if (renderHook) renderHook(newVNode);
tmp = c.render(c.props, c.state, c.context);
// Handle setState called in render, see #2553
c.state = c._nextState;
} while (c._bits & COMPONENT_DIRTY && ++count < 25);
}
// Handle setState called in render, see #2553
c.state = c._nextState;
if (c.getChildContext != NULL) {
globalContext = assign({}, globalContext, c.getChildContext());
}
if (
isClassComponent &&
oldVNode._component &&
c.getSnapshotBeforeUpdate != NULL
) {
snapshot = c.getSnapshotBeforeUpdate(oldProps, oldState);
}
const renderResult =
tmp != NULL && tmp.type === Fragment && tmp.key == NULL
? cloneNode(tmp.props.children)
: tmp;
oldDom = diffChildren(
parentDom,
isArray(renderResult) ? renderResult : [renderResult],
newVNode,
oldVNode,
globalContext,
namespace,
excessDomChildren,
commitQueue,
oldDom,
isHydrating,
refQueue,
doc
);
// We successfully rendered this VNode, unset any stored hydration/bailout state:
newVNode._flags &= RESET_MODE;
if (c._renderCallbacks.length) {
commitQueue.push(c);
}
if (c._bits & COMPONENT_PENDING_ERROR) {
c._bits &= ~(COMPONENT_PROCESSING_EXCEPTION | COMPONENT_PENDING_ERROR);
}
} catch (e) {
newVNode._original = NULL;
// if hydrating or creating initial tree, bailout preserves DOM:
if (isHydrating || excessDomChildren != NULL) {
if (e.then) {
let commentMarkersToFind = 0,
done;
newVNode._flags |= isHydrating
? MODE_HYDRATE | MODE_SUSPENDED
: MODE_SUSPENDED;
newVNode._component._excess = [];
for (let i = 0; i < excessDomChildren.length; i++) {
const child = excessDomChildren[i];
if (child == NULL || done) continue;
// When we encounter a boundary with $s we are opening
// a boundary, this implies that we need to bump
// the amount of markers we need to find before closing
// the outer boundary.
// We exclude the open and closing marker from
// the future excessDomChildren but any nested one
// needs to be included for future suspensions.
if (child.nodeType == 8) {
if (child.data == '$s') {
if (commentMarkersToFind) {
newVNode._component._excess.push(child);
}
commentMarkersToFind++;
} else if (child.data == '/$s') {
commentMarkersToFind--;
if (commentMarkersToFind) {
newVNode._component._excess.push(child);
}
done = commentMarkersToFind == 0;
oldDom = excessDomChildren[i];
}
excessDomChildren[i] = NULL;
} else if (commentMarkersToFind) {
newVNode._component._excess.push(child);
excessDomChildren[i] = NULL;
}
}
if (!done) {
while (oldDom && oldDom.nodeType == 8 && oldDom.nextSibling) {
oldDom = oldDom.nextSibling;
}
excessDomChildren[excessDomChildren.indexOf(oldDom)] = NULL;
newVNode._component._excess = [oldDom];
}
newVNode._dom = oldDom;
} else {
for (let i = excessDomChildren.length; i--; ) {
removeNode(excessDomChildren[i]);
}
markAsForce(newVNode);
}
} else {
newVNode._dom = oldVNode._dom;
newVNode._children = oldVNode._children;
if (!e.then) markAsForce(newVNode);
}
options._catchError(e, newVNode, oldVNode);
}
} else {
oldDom = newVNode._dom = diffElementNodes(
oldVNode._dom,
newVNode,
oldVNode,
globalContext,
namespace,
excessDomChildren,
commitQueue,
isHydrating,
refQueue,
doc
);
}
if ((tmp = options.diffed)) tmp(newVNode);
return newVNode._flags & MODE_SUSPENDED ? UNDEFINED : oldDom;
}
function markAsForce(vnode) {
if (vnode && vnode._component) vnode._component._bits |= COMPONENT_FORCE;
if (vnode && vnode._children) vnode._children.forEach(markAsForce);
}
/**
* @param {Array} commitQueue List of components
* which have callbacks to invoke in commitRoot
* @param {VNode} root
*/
export function commitRoot(commitQueue, root, refQueue) {
for (let i = 0; i < refQueue.length; i++) {
applyRef(refQueue[i], refQueue[++i], refQueue[++i]);
}
if (options._commit) options._commit(root, commitQueue);
commitQueue.some(c => {
try {
// @ts-expect-error Reuse the commitQueue variable here so the type changes
commitQueue = c._renderCallbacks;
c._renderCallbacks = [];
commitQueue.some(cb => {
// @ts-expect-error See above comment on commitQueue
cb.call(c);
});
} catch (e) {
options._catchError(e, c._vnode);
}
});
}
function cloneNode(node) {
if (typeof node != 'object' || node == NULL || node._depth > 0) {
return node;
}
if (isArray(node)) {
return node.map(cloneNode);
}
return assign({}, node);
}
/**
* Diff two virtual nodes representing DOM element
* @param {PreactElement} dom The DOM element representing the virtual nodes
* being diffed
* @param {VNode} newVNode The new virtual node
* @param {VNode} oldVNode The old virtual node
* @param {object} globalContext The current context object
* @param {string} namespace Current namespace of the DOM node (HTML, SVG, or MathML)
* @param {Array} excessDomChildren
* @param {Array} commitQueue List of components which have callbacks
* to invoke in commitRoot
* @param {boolean} isHydrating Whether or not we are in hydration
* @param {any[]} refQueue an array of elements needed to invoke refs
* @param {Document} doc The document object to use for creating elements
* @returns {PreactElement}
*/
function diffElementNodes(
dom,
newVNode,
oldVNode,
globalContext,
namespace,
excessDomChildren,
commitQueue,
isHydrating,
refQueue,
doc
) {
let oldProps = oldVNode.props || EMPTY_OBJ;
const newProps = newVNode.props;
const nodeType = /** @type {string} */ (newVNode.type);
/** @type {any} */
let i;
/** @type {{ __html?: string }} */
let newHtml;
/** @type {{ __html?: string }} */
let oldHtml;
/** @type {ComponentChildren} */
let newChildren;
let value;
let inputValue;
let checked;
// Tracks entering and exiting namespaces when descending through the tree.
if (nodeType == 'svg') namespace = SVG_NAMESPACE;
else if (nodeType == 'math') namespace = MATH_NAMESPACE;
else if (!namespace) namespace = XHTML_NAMESPACE;
if (excessDomChildren != NULL) {
for (i = 0; i < excessDomChildren.length; i++) {
value = excessDomChildren[i];
// if newVNode matches an element in excessDomChildren or the `dom`
// argument matches an element in excessDomChildren, remove it from
// excessDomChildren so it isn't later removed in diffChildren
if (
value &&
'setAttribute' in value == !!nodeType &&
(nodeType ? value.localName == nodeType : value.nodeType == 3)
) {
dom = value;
excessDomChildren[i] = NULL;
break;
}
}
}
if (dom == NULL) {
if (nodeType == NULL) {
return doc.createTextNode(newProps);
}
dom = doc.createElementNS(namespace, nodeType, newProps.is && newProps);
// we are creating a new node, so we can assume this is a new subtree (in
// case we are hydrating), this deopts the hydrate
if (isHydrating) {
if (options._hydrationMismatch)
options._hydrationMismatch(newVNode, excessDomChildren);
isHydrating = false;
}
// we created a new parent, so none of the previously attached children can be reused:
excessDomChildren = NULL;
}
if (nodeType == NULL) {
// During hydration, we still have to split merged text from SSR'd HTML.
if (oldProps !== newProps && (!isHydrating || dom.data != newProps)) {
dom.data = newProps;
}
} else {
// If excessDomChildren was not null, repopulate it with the current element's children:
excessDomChildren = excessDomChildren && slice.call(dom.childNodes);
// If we are in a situation where we are not hydrating but are using
// existing DOM (e.g. replaceNode) we should read the existing DOM
// attributes to diff them
if (!isHydrating && excessDomChildren != NULL) {
oldProps = {};
for (i = 0; i < dom.attributes.length; i++) {
value = dom.attributes[i];
oldProps[value.name] = value.value;
}
}
for (i in oldProps) {
value = oldProps[i];
if (i == 'dangerouslySetInnerHTML') {
oldHtml = value;
} else if (
i != 'children' &&
!(i in newProps) &&
!(i == 'value' && 'defaultValue' in newProps) &&
!(i == 'checked' && 'defaultChecked' in newProps)
) {
setProperty(dom, i, NULL, value, namespace);
}
}
// During hydration, props are not diffed at all (including dangerouslySetInnerHTML)
// @TODO we should warn in debug mode when props don't match here.
const shouldRevalidateProps = oldVNode._flags & FORCE_PROPS_REVALIDATE;
for (i in newProps) {
value = newProps[i];
if (i == 'children') {
newChildren = value;
} else if (i == 'dangerouslySetInnerHTML') {
newHtml = value;
} else if (i == 'value') {
inputValue = value;
} else if (i == 'checked') {
checked = value;
} else if (
(!isHydrating || typeof value == 'function') &&
(oldProps[i] !== value || shouldRevalidateProps)
) {
setProperty(dom, i, value, oldProps[i], namespace);
}
}
// If the new vnode didn't have dangerouslySetInnerHTML, diff its children
if (newHtml) {
// Avoid re-applying the same '__html' if it did not changed between re-render
if (
!isHydrating &&
(!oldHtml ||
(newHtml.__html != oldHtml.__html && newHtml.__html != dom.innerHTML))
) {
dom.innerHTML = newHtml.__html;
}
newVNode._children = [];
} else {
if (oldHtml) dom.innerHTML = '';
if (
nodeType == 'foreignObject' ||
(namespace == MATH_NAMESPACE && MATHML_TOKEN_ELEMENTS.test(nodeType))
) {
namespace = XHTML_NAMESPACE;
}
diffChildren(
// @ts-expect-error
nodeType == 'template' ? dom.content : dom,
isArray(newChildren) ? newChildren : [newChildren],
newVNode,
oldVNode,
globalContext,
namespace,
excessDomChildren,
commitQueue,
excessDomChildren
? excessDomChildren[0]
: oldVNode._children && getDomSibling(oldVNode, 0),
isHydrating,
refQueue,
doc
);
// Remove children that are not part of any vnode.
if (excessDomChildren != NULL) {
for (i = excessDomChildren.length; i--; ) {
removeNode(excessDomChildren[i]);
}
}
}
// As above, don't diff props during hydration
if (!isHydrating) {
i = 'value';
if (nodeType == 'progress' && inputValue == NULL) {
dom.removeAttribute('value');
} else if (
inputValue != UNDEFINED &&
// #2756 For the
## Backers
Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/preact#backer)]
---
## License
MIT
[](https://preactjs.com)
[preact/compat]: https://github.com/preactjs/preact/tree/main/compat
[hyperscript]: https://github.com/dominictarr/hyperscript
[DevTools]: https://github.com/preactjs/preact-devtools
================================================
FILE: babel.config.js
================================================
module.exports = function (api) {
api.cache(true);
const noModules = String(process.env.BABEL_NO_MODULES) === 'true';
const rename = {};
const mangle = require('./mangle.json');
for (let prop in mangle.props.props) {
let name = prop;
if (name[0] === '$') {
name = name.slice(1);
}
rename[name] = mangle.props.props[prop];
}
return {
presets: [
[
'@babel/preset-env',
{
loose: true,
// Don't transform modules when using esbuild
modules: noModules ? false : 'auto',
exclude: ['@babel/plugin-transform-typeof-symbol'],
targets: {
browsers: [
'chrome >= 40',
'safari >= 9',
'firefox >= 36',
'edge >= 12',
'not dead'
]
}
}
]
],
plugins: [
'@babel/plugin-transform-react-jsx',
['babel-plugin-transform-rename-properties', { rename }]
],
include: ['**/src/**/*.js', '**/test/**/*.js'],
overrides: [
{
test: /(component-stack|debug)\.test\.js$/,
plugins: ['@babel/plugin-transform-react-jsx-source']
}
]
};
};
================================================
FILE: biome.json
================================================
{
"formatter": {
"enabled": true,
"formatWithErrors": false,
"indentStyle": "tab",
"indentWidth": 2,
"lineEnding": "lf",
"lineWidth": 80,
"attributePosition": "auto",
"includes": [
"**",
"!**/.DS_Store",
"!**/node_modules",
"!**/npm-debug.log",
"!**/dist",
"!**/*/package-lock.json",
"!**/yarn.lock",
"!**/.vscode",
"!**/.idea",
"!**/test/ts/**/*.js",
"!**/coverage",
"!**/*.sw\\[op\\]",
"!**/*.log",
"!**/package/",
"!**/preact-*.tgz",
"!**/preact.tgz",
"!**/package-lock.json"
]
},
"assist": { "actions": { "source": { "organizeImports": "on" } } },
"linter": { "enabled": true, "rules": { "recommended": true } },
"javascript": {
"formatter": {
"jsxQuoteStyle": "double",
"quoteProperties": "asNeeded",
"trailingCommas": "none",
"semicolons": "always",
"arrowParentheses": "asNeeded",
"bracketSpacing": true,
"bracketSameLine": false,
"quoteStyle": "single",
"attributePosition": "auto"
}
},
"overrides": [
{
"includes": ["**/*.json", "**/.*rc/**", "**/*.yml"],
"formatter": { "indentWidth": 2, "indentStyle": "space" }
}
]
}
================================================
FILE: compat/LICENSE
================================================
The MIT License (MIT)
Copyright (c) 2015-present Jason Miller
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: compat/client.d.ts
================================================
import * as preact from '../src/index';
export function createRoot(container: preact.ContainerNode): {
render(children: preact.ComponentChild): void;
unmount(): void;
};
export function hydrateRoot(
container: preact.ContainerNode,
children: preact.ComponentChild
): ReturnType