Repository: preactjs/preact-www Branch: master Commit: f62390987974 Files: 553 Total size: 2.8 MB Directory structure: gitextract_65jqq7az/ ├── .editorconfig ├── .github/ │ └── workflows/ │ └── ci.yml ├── .gitignore ├── .npmrc ├── .prettierignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── content/ │ ├── de/ │ │ ├── 404.md │ │ ├── about/ │ │ │ ├── browser-support.md │ │ │ ├── demos-examples.md │ │ │ ├── libraries-addons.md │ │ │ ├── project-goals.md │ │ │ └── we-are-using.md │ │ ├── guide/ │ │ │ └── v8/ │ │ │ ├── api-reference.md │ │ │ ├── differences-to-react.md │ │ │ ├── extending-component.md │ │ │ ├── external-dom-mutations.md │ │ │ ├── forms.md │ │ │ ├── getting-started.md │ │ │ ├── linked-state.md │ │ │ ├── progressive-web-apps.md │ │ │ ├── switching-to-preact.md │ │ │ ├── types-of-components.md │ │ │ └── unit-testing-with-enzyme.md │ │ └── index.md │ ├── en/ │ │ ├── 404.md │ │ ├── about/ │ │ │ ├── browser-support.md │ │ │ ├── demos-examples.md │ │ │ ├── libraries-addons.md │ │ │ ├── project-goals.md │ │ │ └── we-are-using.md │ │ ├── blog/ │ │ │ ├── introducing-signals.md │ │ │ ├── preact-x.md │ │ │ ├── prerendering-preset-vite.md │ │ │ ├── signal-boosting.md │ │ │ └── simplifying-islands-arch.md │ │ ├── blog.md │ │ ├── branding.md │ │ ├── guide/ │ │ │ ├── v10/ │ │ │ │ ├── api-reference.md │ │ │ │ ├── components.md │ │ │ │ ├── context.md │ │ │ │ ├── debugging.md │ │ │ │ ├── differences-to-react.md │ │ │ │ ├── forms.md │ │ │ │ ├── getting-started.md │ │ │ │ ├── hooks.md │ │ │ │ ├── no-build-workflows.md │ │ │ │ ├── options.md │ │ │ │ ├── preact-custom-element.md │ │ │ │ ├── preact-iso.md │ │ │ │ ├── preact-root-fragment.md │ │ │ │ ├── preact-testing-library.md │ │ │ │ ├── refs.md │ │ │ │ ├── server-side-rendering.md │ │ │ │ ├── signals.md │ │ │ │ ├── typescript.md │ │ │ │ ├── unit-testing-with-enzyme.md │ │ │ │ ├── upgrade-guide.md │ │ │ │ ├── web-components.md │ │ │ │ └── whats-new.md │ │ │ ├── v11/ │ │ │ │ ├── api-reference.md │ │ │ │ ├── components.md │ │ │ │ ├── context.md │ │ │ │ ├── debugging.md │ │ │ │ ├── differences-to-react.md │ │ │ │ ├── forms.md │ │ │ │ ├── getting-started.md │ │ │ │ ├── hooks.md │ │ │ │ ├── no-build-workflows.md │ │ │ │ ├── options.md │ │ │ │ ├── preact-custom-element.md │ │ │ │ ├── preact-iso.md │ │ │ │ ├── preact-root-fragment.md │ │ │ │ ├── preact-testing-library.md │ │ │ │ ├── refs.md │ │ │ │ ├── server-side-rendering.md │ │ │ │ ├── signals.md │ │ │ │ ├── typescript.md │ │ │ │ ├── unit-testing-with-enzyme.md │ │ │ │ ├── upgrade-guide.md │ │ │ │ └── web-components.md │ │ │ └── v8/ │ │ │ ├── api-reference.md │ │ │ ├── differences-to-react.md │ │ │ ├── extending-component.md │ │ │ ├── external-dom-mutations.md │ │ │ ├── forms.md │ │ │ ├── getting-started.md │ │ │ ├── linked-state.md │ │ │ ├── progressive-web-apps.md │ │ │ ├── switching-to-preact.md │ │ │ ├── types-of-components.md │ │ │ └── unit-testing-with-enzyme.md │ │ ├── index.md │ │ ├── repl.md │ │ └── tutorial/ │ │ ├── 01-vdom.md │ │ ├── 02-events.md │ │ ├── 03-components.md │ │ ├── 04-state.md │ │ ├── 05-refs.md │ │ ├── 06-context.md │ │ ├── 07-side-effects.md │ │ ├── 08-keys.md │ │ ├── 09-error-handling.md │ │ ├── 10-links.md │ │ └── index.md │ ├── es/ │ │ ├── 404.md │ │ ├── about/ │ │ │ ├── browser-support.md │ │ │ ├── demos-examples.md │ │ │ ├── libraries-addons.md │ │ │ ├── project-goals.md │ │ │ └── we-are-using.md │ │ ├── blog/ │ │ │ ├── introducing-signals.md │ │ │ ├── preact-x.md │ │ │ ├── prerendering-preset-vite.md │ │ │ ├── signal-boosting.md │ │ │ └── simplifying-islands-arch.md │ │ ├── blog.md │ │ ├── branding.md │ │ ├── guide/ │ │ │ ├── v10/ │ │ │ │ ├── components.md │ │ │ │ ├── forms.md │ │ │ │ ├── getting-started.md │ │ │ │ ├── hooks.md │ │ │ │ ├── upgrade-guide.md │ │ │ │ └── whats-new.md │ │ │ ├── v11/ │ │ │ │ ├── api-reference.md │ │ │ │ ├── components.md │ │ │ │ ├── context.md │ │ │ │ ├── debugging.md │ │ │ │ ├── differences-to-react.md │ │ │ │ ├── forms.md │ │ │ │ ├── getting-started.md │ │ │ │ ├── hooks.md │ │ │ │ ├── no-build-workflows.md │ │ │ │ ├── options.md │ │ │ │ ├── preact-custom-element.md │ │ │ │ ├── preact-iso.md │ │ │ │ ├── preact-root-fragment.md │ │ │ │ ├── preact-testing-library.md │ │ │ │ ├── refs.md │ │ │ │ ├── server-side-rendering.md │ │ │ │ ├── signals.md │ │ │ │ ├── typescript.md │ │ │ │ ├── unit-testing-with-enzyme.md │ │ │ │ ├── upgrade-guide.md │ │ │ │ └── web-components.md │ │ │ └── v8/ │ │ │ ├── api-reference.md │ │ │ ├── differences-to-react.md │ │ │ ├── extending-component.md │ │ │ ├── external-dom-mutations.md │ │ │ ├── forms.md │ │ │ ├── getting-started.md │ │ │ ├── linked-state.md │ │ │ ├── progressive-web-apps.md │ │ │ ├── switching-to-preact.md │ │ │ ├── types-of-components.md │ │ │ └── unit-testing-with-enzyme.md │ │ └── index.md │ ├── fr/ │ │ ├── 404.md │ │ ├── about/ │ │ │ ├── browser-support.md │ │ │ ├── demos-examples.md │ │ │ ├── libraries-addons.md │ │ │ ├── project-goals.md │ │ │ └── we-are-using.md │ │ ├── guide/ │ │ │ └── v8/ │ │ │ ├── api-reference.md │ │ │ ├── differences-to-react.md │ │ │ ├── extending-component.md │ │ │ ├── external-dom-mutations.md │ │ │ ├── forms.md │ │ │ ├── getting-started.md │ │ │ ├── linked-state.md │ │ │ ├── progressive-web-apps.md │ │ │ ├── switching-to-preact.md │ │ │ ├── types-of-components.md │ │ │ └── unit-testing-with-enzyme.md │ │ └── index.md │ ├── it/ │ │ ├── blog/ │ │ │ └── introducing-signals.md │ │ ├── guide/ │ │ │ └── v8/ │ │ │ └── getting-started.md │ │ └── index.md │ ├── ja/ │ │ ├── 404.md │ │ ├── about/ │ │ │ ├── browser-support.md │ │ │ ├── project-goals.md │ │ │ └── we-are-using.md │ │ ├── guide/ │ │ │ └── v10/ │ │ │ ├── api-reference.md │ │ │ ├── components.md │ │ │ ├── context.md │ │ │ ├── debugging.md │ │ │ ├── differences-to-react.md │ │ │ ├── forms.md │ │ │ ├── getting-started.md │ │ │ ├── hooks.md │ │ │ ├── options.md │ │ │ ├── preact-testing-library.md │ │ │ ├── refs.md │ │ │ ├── server-side-rendering.md │ │ │ ├── unit-testing-with-enzyme.md │ │ │ ├── upgrade-guide.md │ │ │ ├── web-components.md │ │ │ └── whats-new.md │ │ └── index.md │ ├── kr/ │ │ ├── 404.md │ │ ├── about/ │ │ │ ├── browser-support.md │ │ │ ├── demos-examples.md │ │ │ ├── libraries-addons.md │ │ │ ├── project-goals.md │ │ │ └── we-are-using.md │ │ ├── guide/ │ │ │ └── v10/ │ │ │ └── differences-to-react.md │ │ ├── index.md │ │ └── tutorial/ │ │ ├── 01-vdom.md │ │ ├── 02-events.md │ │ └── index.md │ ├── pt-br/ │ │ ├── 404.md │ │ ├── about/ │ │ │ ├── browser-support.md │ │ │ ├── demos-examples.md │ │ │ ├── libraries-addons.md │ │ │ ├── project-goals.md │ │ │ └── we-are-using.md │ │ ├── guide/ │ │ │ ├── v10/ │ │ │ │ ├── api-reference.md │ │ │ │ ├── components.md │ │ │ │ ├── context.md │ │ │ │ ├── debugging.md │ │ │ │ ├── differences-to-react.md │ │ │ │ ├── forms.md │ │ │ │ ├── getting-started.md │ │ │ │ ├── hooks.md │ │ │ │ ├── refs.md │ │ │ │ ├── server-side-rendering.md │ │ │ │ ├── signals.md │ │ │ │ ├── unit-testing-with-enzyme.md │ │ │ │ ├── upgrade-guide.md │ │ │ │ ├── web-components.md │ │ │ │ └── whats-new.md │ │ │ └── v8/ │ │ │ ├── api-reference.md │ │ │ ├── differences-to-react.md │ │ │ ├── extending-component.md │ │ │ ├── external-dom-mutations.md │ │ │ ├── forms.md │ │ │ ├── getting-started.md │ │ │ ├── linked-state.md │ │ │ ├── progressive-web-apps.md │ │ │ ├── switching-to-preact.md │ │ │ ├── types-of-components.md │ │ │ └── unit-testing-with-enzyme.md │ │ └── index.md │ ├── ru/ │ │ ├── 404.md │ │ ├── about/ │ │ │ ├── browser-support.md │ │ │ ├── demos-examples.md │ │ │ ├── libraries-addons.md │ │ │ ├── project-goals.md │ │ │ └── we-are-using.md │ │ ├── blog/ │ │ │ ├── introducing-signals.md │ │ │ ├── preact-x.md │ │ │ ├── prerendering-preset-vite.md │ │ │ ├── signal-boosting.md │ │ │ └── simplifying-islands-arch.md │ │ ├── blog.md │ │ ├── branding.md │ │ ├── guide/ │ │ │ ├── v10/ │ │ │ │ ├── api-reference.md │ │ │ │ ├── components.md │ │ │ │ ├── context.md │ │ │ │ ├── debugging.md │ │ │ │ ├── differences-to-react.md │ │ │ │ ├── forms.md │ │ │ │ ├── getting-started.md │ │ │ │ ├── hooks.md │ │ │ │ ├── no-build-workflows.md │ │ │ │ ├── options.md │ │ │ │ ├── preact-custom-element.md │ │ │ │ ├── preact-iso.md │ │ │ │ ├── preact-root-fragment.md │ │ │ │ ├── preact-testing-library.md │ │ │ │ ├── refs.md │ │ │ │ ├── server-side-rendering.md │ │ │ │ ├── signals.md │ │ │ │ ├── typescript.md │ │ │ │ ├── unit-testing-with-enzyme.md │ │ │ │ ├── upgrade-guide.md │ │ │ │ ├── web-components.md │ │ │ │ └── whats-new.md │ │ │ ├── v11/ │ │ │ │ ├── api-reference.md │ │ │ │ ├── components.md │ │ │ │ ├── context.md │ │ │ │ ├── debugging.md │ │ │ │ ├── differences-to-react.md │ │ │ │ ├── forms.md │ │ │ │ ├── getting-started.md │ │ │ │ ├── hooks.md │ │ │ │ ├── no-build-workflows.md │ │ │ │ ├── options.md │ │ │ │ ├── preact-custom-element.md │ │ │ │ ├── preact-iso.md │ │ │ │ ├── preact-root-fragment.md │ │ │ │ ├── preact-testing-library.md │ │ │ │ ├── refs.md │ │ │ │ ├── server-side-rendering.md │ │ │ │ ├── signals.md │ │ │ │ ├── typescript.md │ │ │ │ ├── unit-testing-with-enzyme.md │ │ │ │ ├── upgrade-guide.md │ │ │ │ └── web-components.md │ │ │ └── v8/ │ │ │ ├── api-reference.md │ │ │ ├── differences-to-react.md │ │ │ ├── extending-component.md │ │ │ ├── external-dom-mutations.md │ │ │ ├── forms.md │ │ │ ├── getting-started.md │ │ │ ├── linked-state.md │ │ │ ├── progressive-web-apps.md │ │ │ ├── switching-to-preact.md │ │ │ ├── types-of-components.md │ │ │ └── unit-testing-with-enzyme.md │ │ ├── index.md │ │ ├── repl.md │ │ └── tutorial/ │ │ ├── 01-vdom.md │ │ ├── 02-events.md │ │ ├── 03-components.md │ │ ├── 04-state.md │ │ ├── 05-refs.md │ │ ├── 06-context.md │ │ ├── 07-side-effects.md │ │ ├── 08-keys.md │ │ ├── 09-error-handling.md │ │ ├── 10-links.md │ │ └── index.md │ ├── tr/ │ │ ├── 404.md │ │ ├── about/ │ │ │ ├── browser-support.md │ │ │ ├── demos-examples.md │ │ │ ├── libraries-addons.md │ │ │ ├── project-goals.md │ │ │ └── we-are-using.md │ │ ├── guide/ │ │ │ └── v8/ │ │ │ ├── api-reference.md │ │ │ ├── differences-to-react.md │ │ │ ├── extending-component.md │ │ │ ├── external-dom-mutations.md │ │ │ ├── forms.md │ │ │ ├── getting-started.md │ │ │ ├── linked-state.md │ │ │ ├── progressive-web-apps.md │ │ │ ├── switching-to-preact.md │ │ │ ├── types-of-components.md │ │ │ └── unit-testing-with-enzyme.md │ │ └── index.md │ └── zh/ │ ├── 404.md │ ├── about/ │ │ ├── browser-support.md │ │ ├── demos-examples.md │ │ ├── libraries-addons.md │ │ ├── project-goals.md │ │ └── we-are-using.md │ ├── blog/ │ │ ├── introducing-signals.md │ │ ├── preact-x.md │ │ ├── prerendering-preset-vite.md │ │ ├── signal-boosting.md │ │ └── simplifying-islands-arch.md │ ├── blog.md │ ├── branding.md │ ├── guide/ │ │ ├── v10/ │ │ │ ├── api-reference.md │ │ │ ├── components.md │ │ │ ├── context.md │ │ │ ├── debugging.md │ │ │ ├── differences-to-react.md │ │ │ ├── forms.md │ │ │ ├── getting-started.md │ │ │ ├── hooks.md │ │ │ ├── no-build-workflows.md │ │ │ ├── options.md │ │ │ ├── preact-iso.md │ │ │ ├── preact-testing-library.md │ │ │ ├── refs.md │ │ │ ├── server-side-rendering.md │ │ │ ├── signals.md │ │ │ ├── typescript.md │ │ │ ├── unit-testing-with-enzyme.md │ │ │ ├── upgrade-guide.md │ │ │ ├── web-components.md │ │ │ └── whats-new.md │ │ ├── v11/ │ │ │ ├── api-reference.md │ │ │ ├── components.md │ │ │ ├── context.md │ │ │ ├── debugging.md │ │ │ ├── differences-to-react.md │ │ │ ├── forms.md │ │ │ ├── getting-started.md │ │ │ ├── hooks.md │ │ │ ├── no-build-workflows.md │ │ │ ├── options.md │ │ │ ├── preact-iso.md │ │ │ ├── preact-testing-library.md │ │ │ ├── refs.md │ │ │ ├── server-side-rendering.md │ │ │ ├── signals.md │ │ │ ├── typescript.md │ │ │ ├── unit-testing-with-enzyme.md │ │ │ ├── upgrade-guide.md │ │ │ └── web-components.md │ │ └── v8/ │ │ ├── api-reference.md │ │ ├── differences-to-react.md │ │ ├── extending-component.md │ │ ├── external-dom-mutations.md │ │ ├── forms.md │ │ ├── getting-started.md │ │ ├── linked-state.md │ │ ├── progressive-web-apps.md │ │ ├── switching-to-preact.md │ │ ├── types-of-components.md │ │ └── unit-testing-with-enzyme.md │ ├── index.md │ ├── repl.md │ └── tutorial/ │ ├── 01-vdom.md │ ├── 02-events.md │ ├── 03-components.md │ ├── 04-state.md │ ├── 05-refs.md │ ├── 06-context.md │ ├── 07-side-effects.md │ ├── 08-keys.md │ ├── 09-error-handling.md │ ├── 10-links.md │ └── index.md ├── index.html ├── jsconfig.json ├── package.json ├── plugins/ │ ├── generate-llms-txt.js │ ├── html-routing-middleware.js │ ├── netlify.js │ ├── precompile-markdown/ │ │ ├── gh-emoji/ │ │ │ ├── emoji.json │ │ │ └── index.js │ │ └── index.js │ ├── rss-feed.js │ └── spa-fallback-middleware.js ├── src/ │ ├── analytics.js │ ├── assets/ │ │ ├── .well-known/ │ │ │ └── traffic-advice │ │ ├── _headers │ │ ├── _redirects │ │ ├── contributors.json │ │ └── robots.txt │ ├── components/ │ │ ├── app.jsx │ │ ├── blog-meta/ │ │ │ ├── index.jsx │ │ │ └── style.module.css │ │ ├── blog-overview/ │ │ │ ├── index.jsx │ │ │ └── style.module.css │ │ ├── branding/ │ │ │ ├── index.jsx │ │ │ └── style.module.css │ │ ├── code-editor/ │ │ │ ├── code-mirror.css │ │ │ ├── index.jsx │ │ │ └── style.module.css │ │ ├── content-region/ │ │ │ └── index.jsx │ │ ├── controllers/ │ │ │ ├── blog-page.jsx │ │ │ ├── guide-page.jsx │ │ │ ├── markdown-region.jsx │ │ │ ├── not-found.jsx │ │ │ ├── page.jsx │ │ │ ├── repl/ │ │ │ │ ├── error-overlay.jsx │ │ │ │ ├── error-overlay.module.css │ │ │ │ ├── errors.js │ │ │ │ ├── examples/ │ │ │ │ │ ├── context.txt │ │ │ │ │ ├── counters/ │ │ │ │ │ │ ├── counter-hooks.txt │ │ │ │ │ │ ├── counter-htm.txt │ │ │ │ │ │ ├── counter-signals.txt │ │ │ │ │ │ └── counter.txt │ │ │ │ │ ├── github-repo-list.txt │ │ │ │ │ ├── index.js │ │ │ │ │ ├── spiral.txt │ │ │ │ │ ├── style.css │ │ │ │ │ └── todo-lists/ │ │ │ │ │ ├── todo-list-signals.txt │ │ │ │ │ └── todo-list.txt │ │ │ │ ├── index.jsx │ │ │ │ ├── query-encode.js │ │ │ │ ├── repl.setup.js │ │ │ │ ├── repl.worker.js │ │ │ │ ├── runner.jsx │ │ │ │ ├── style.module.css │ │ │ │ └── window.js │ │ │ ├── repl-page.jsx │ │ │ ├── style.module.css │ │ │ ├── tutorial/ │ │ │ │ ├── contexts.jsx │ │ │ │ ├── index.jsx │ │ │ │ └── style.module.css │ │ │ └── tutorial-page.jsx │ │ ├── doc-version/ │ │ │ ├── index.jsx │ │ │ └── style.module.css │ │ ├── edit-button/ │ │ │ ├── index.jsx │ │ │ └── style.module.css │ │ ├── footer/ │ │ │ ├── index.jsx │ │ │ └── style.module.css │ │ ├── gh-emoji/ │ │ │ └── index.js │ │ ├── github-repos.jsx │ │ ├── header/ │ │ │ ├── corner.jsx │ │ │ ├── corner.module.css │ │ │ ├── gh-version.jsx │ │ │ ├── index.jsx │ │ │ ├── search.jsx │ │ │ └── style.module.css │ │ ├── jumbotron/ │ │ │ ├── index.jsx │ │ │ └── style.module.css │ │ ├── logo.jsx │ │ ├── routes.jsx │ │ ├── sidebar/ │ │ │ ├── index.jsx │ │ │ ├── sidebar-nav.jsx │ │ │ ├── sidebar-nav.module.css │ │ │ └── style.module.css │ │ ├── splitter/ │ │ │ ├── index.jsx │ │ │ └── splitter.module.css │ │ ├── sponsors/ │ │ │ ├── index.jsx │ │ │ └── style.module.css │ │ ├── tab-group/ │ │ │ ├── index.jsx │ │ │ └── style.module.css │ │ ├── table-of-contents/ │ │ │ └── index.jsx │ │ ├── time/ │ │ │ ├── index.jsx │ │ │ └── time.module.css │ │ ├── todo-list.jsx │ │ ├── we-are-using/ │ │ │ ├── index.jsx │ │ │ └── style.module.css │ │ └── widgets.js │ ├── config.json │ ├── index.jsx │ ├── lambda/ │ │ ├── release.js │ │ └── repos.js │ ├── lib/ │ │ ├── content.js │ │ ├── cx.js │ │ ├── frontmatter.js │ │ ├── github.js │ │ ├── i18n.jsx │ │ ├── localstorage.js │ │ ├── page-title.js │ │ ├── prerender-data.jsx │ │ ├── repl.js │ │ ├── toggle-overlay.js │ │ ├── use-content.js │ │ ├── use-delegated-prefetch.js │ │ └── use-resource.js │ ├── locales/ │ │ ├── de.json │ │ ├── en.json │ │ ├── es.json │ │ ├── fr.json │ │ ├── it.json │ │ ├── ja.json │ │ ├── kr.json │ │ ├── pt-br.json │ │ ├── ru.json │ │ ├── tr.json │ │ └── zh.json │ ├── route-config.js │ ├── style/ │ │ ├── buttons.css │ │ ├── docsearch.css │ │ ├── home.css │ │ ├── index.css │ │ ├── list-view.css │ │ ├── markdown.css │ │ ├── prism.css │ │ └── variables.css │ └── types.d.ts └── vite.config.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .editorconfig ================================================ root = true [*] indent_style = tab end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true [{*.json,.*rc,*.yml}] indent_style = space indent_size = 2 [*.md] trim_trailing_whitespace = false ================================================ FILE: .github/workflows/ci.yml ================================================ name: CI on: push: branches: - master pull_request: branches: - master jobs: build: name: Build runs-on: ubuntu-latest timeout-minutes: 5 steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version-file: 'package.json' cache: 'npm' cache-dependency-path: '**/package-lock.json' - uses: preactjs/compressed-size-action@v2 with: pattern: 'build/**/*.{js,css}' exclude: 'build/assets/{prerender,xmldom,release,repos}-*.js' strip-hash: '-(.{8})\.' minimum-change-threshold: 100 ================================================ FILE: .gitignore ================================================ /node_modules /npm-debug.log /build .DS_Store dist *.sw[op] ================================================ FILE: .npmrc ================================================ ; Allow installs to proceed even when peer dependency versions don't align legacy-peer-deps=true ================================================ FILE: .prettierignore ================================================ package.json package-lock.json ================================================ FILE: CODE_OF_CONDUCT.md ================================================ # Contributor Covenant Code of Conduct ## Our Pledge In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. ## Our Standards Examples of behavior that contributes to creating a positive environment include: * Using welcoming and inclusive language * Being respectful of differing viewpoints and experiences * Gracefully accepting constructive criticism * Focusing on what is best for the community * Showing empathy towards other community members Examples of unacceptable behavior by participants include: * The use of sexualized language or imagery and unwelcome sexual attention or advances * Trolling, insulting/derogatory comments, and personal or political attacks * Public or private harassment * Publishing others' private information, such as a physical or electronic address, without explicit permission * Other conduct which could reasonably be considered inappropriate in a professional setting ## Our Responsibilities Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. ## Scope This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. ## Enforcement Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at hello@preactjs.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. ## Attribution This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] [homepage]: http://contributor-covenant.org [version]: http://contributor-covenant.org/version/1/4/ ================================================ FILE: CONTRIBUTING.md ================================================ # Contributing Thanks for contributing to Preact's documentation! ## Repo Setup To work on the site locally, you'll want to fork the `preact-www` repository and clone it to your local machine. Once cloned, you can get up and running with the following: ```bash $ npm install $ npm run dev ``` At this point, you should have the site running at `http://localhost:8080`, ready for you to make any changes. ## Application Structure This website is built as a [prerendered static app](https://developers.google.com/web/updates/2019/02/rendering-on-the-web#static-rendering), following the [Application Shell pattern](https://developers.google.com/web/fundamentals/architecture/app-shell). ### Content Content is fetched and rendered on the fly from Markdown documents, similiar to how Jekyll and many other static site generators work. Each page on the site is a separate Markdown file, with optional YAML FrontMatter for specifying page metadata or layout information. Once fetched, the markdown content is then parsed using [`marked`](https://github.com/markedjs/marked) and rendered via [`preact-markup`](https://github.com/developit/preact-markup) to create the HTML you can read and interact with. ### Custom Elements Since [`preact`](https://github.com/preactjs/preact) is used to render the Markdown content, we can make use of Custom Elements in our Markdown content to easily allow for dynamic or repated content, such as a generated Table of Contents or the Preact logo. These Elements are defined in [`src/components/widget.js`](./src/components/widget.js) and can be used like so: ```md ## Example Page

Preact

 ``` ### Navigation The navigation menu and route handling are controlled by [`src/config.json`](./src/config.json). Any new documents would need to be added to this file to be accessible via the site's navigation. ## Writing Content The written content on the site is authored in Markdown, found in the [`content`](./content) directory and split up by language. Additionally, [`src/config.json`](./src/config.json) contains some i18n labels which you may need to alter if you were adding a new translated page. Any and all content contributions are greatly appreciated, be that typo fixes or completely new translations. Please author and submit content **only in one language** _(generally your primary written language)_ to facilitate translation. English is the site's default language and is generally the source for translations. Try to follow the existing formatting where possible and treat it (English) as the source of truth in most cases. ### German Version * German translations can be approved by @marvinhagemeister ================================================ FILE: LICENSE ================================================ The MIT License (MIT) Copyright (c) 2016-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: README.md ================================================ # Preact Documentation Website [![Preact Slack Community](https://img.shields.io/badge/slack-Preact%20Slack%20Community-blue?logo=slack)](https://chat.preactjs.com/) > :rocket: `master` is automatically deployed to [preactjs.com](https://preactjs.com) --- ## Chat with Us We have a [Slack community](https://chat.preactjs.com/) where you can chat with the Preact team and the wider Preact community. Come stop by to get support, ask questions, or just to introduce yourself! ## Issues If something doesn't look quite right, or maybe the wording is confusing, please let us know by opening an issue! ## Contributing Check out the [Contributing Guide](./CONTRIBUTING.md) for information on how to contribute to the site and work on it locally. ## License [MIT](./LICENSE) ================================================ FILE: content/de/404.md ================================================ --- title: Not Found --- # Error Oh, diese Seite gibt es wohl nicht mehr. Zeit [nach Hause](/) zurückzukehren! ================================================ FILE: content/de/about/browser-support.md ================================================ --- title: Browserunterstützung --- # Browserunterstützung Prect unterstützt moderne Browser (Chrome, Firefox, Safari, Edge) und IE9+. Es sollte in IE7 sowie IE8 funktionieren, setzt allerdings einige Polyfiller voraus. Wenn es beabsichtigt ist, Preact zu benutzen und diese älteren Browser zu unterstützen, wird empfohlen, einen Polyfiller wie zum Beispiel [es5-shim] oder [babel-polyfill] zu verwenden. [es5-shim]: https://github.com/es-shims/es5-shim [babel-polyfill]: https://babeljs.io/docs/usage/polyfill/ ================================================ FILE: content/de/about/demos-examples.md ================================================ --- title: Demos & Beispiele --- # Demos & Beispiele Diese Seite zeigt einige Demos und Beispiele, die zum Erlernen von Preact benutzt werden können. > :information_desk_person: _Eigenes Beispiel erstellt? > [Einfach hinzufügen!](https://github.com/preactjs/preact-www/blob/master/content/de/about/demos-examples.md)_ ## Vollständige Apps **[Preact Website (preactjs.com)](https://preactjs.com)**
Natürlich ist diese Website mit Preact erstellt.
[GitHub Projekt](https://github.com/preactjs/preact-www) **[ESBench](http://esbench.com)** :alarm_clock:
Erstellt mit Preact & Material Design Lite. **[GuriVR](https://gurivr.com)** :eyeglasses:
Web VR-Geschichtenersteller basierend auf natürlicher Sprache.
[GitHub Projekt](https://github.com/opennewslabs/guri-vr) **[BigWebQuiz](https://bigwebquiz.com)** :game_die:
Die progressive Web App für Publikumspartizipation vom Chrome Dev Summit 2016!
[GitHub Projekt](https://github.com/jakearchibald/big-web-quiz) **[Nectarine.rocks](http://nectarine.rocks)** :peach:
Open-Source peach.cool App.
[GitHub Projekt](https://github.com/developit/nectarine) **[Dropfox](https://github.com/developit/dropfox)** :wolf:
Desktop-App für Dropbox, erstellt mit Preact, Electron und Photon. **[Connectivity Index](https://cindex.co)** :iphone:
Eine Seite, die das Durchsuchen von Daten, geordnet nach Land, des [Akamai State of the Internet Connectivity Report](https://content.akamai.com/PG7010-Q2-2016-SOTI-Connectivity-Report.html) ermöglicht. **[Drag & Drop file upload (webpack 2)](https://contentful-labs.github.io/file-upload-example/)** :rocket:
Desktop App zum Hochladen auf Contentful (API based CMS)
[GitHub Projekt](https://github.com/contentful-labs/file-upload-example) **[Embed Hacker News](https://github.com/TXTPEN/hn)** :kissing_closed_eyes:
Kommentarbaum für die Embed Hacker News unter dem eigenen Blogeintrag. **[ColoGuessr](https://cologuessr.com)** :rainbow:
Testen Sie, wie gut Sie Ihre Farben kennen
[GitHub Project](https://github.com/jackpordi/cologuessr) ## Vollständige Demos & Beispiele **[Documentation Viewer](https://documentation-viewer.firebaseapp.com)**
Onlineansicht der Ausgabe von documentation.js.
[GitHub Projekt](https://github.com/developit/documentation-viewer) **[TodoMVC](http://developit.github.io/preact-todomvc/)**
Inoffiziell schnellste TodoMVC-Implementierung.
[GitHub Projekt](https://github.com/developit/preact-todomvc) **[TodoMVC+PouchDB](http://katopz.github.io/preact-todomvc-pouchdb/)** :floppy_disk:
Synchronisiere TodoMVC offline mit [PouchDB](https://pouchdb.com/).
[GitHub Projekt](https://github.com/katopz/preact-todomvc-pouchdb) **[Hacker News Minimal](https://developit.github.io/hn_minimal/)** :newspaper:
Kleine Hacker News-App.
[GitHub Projekt](https://github.com/developit/hn_minimal) **[Preact Boilerplate](https://preact-boilerplate.surge.sh)** :zap:
Anfängerprojekt mit zwei Befehlen. Preact + Webpack + LESS + CSS Modules.
[GitHub Projekt](https://github.com/developit/preact-boilerplate) **[Preact Offline Starter](https://preact-starter.now.sh)** :100:
Vereinfachter Webpack2-Starter für progressive Web Apps mit Offlinesupport.
[GitHub Projekt](https://github.com/lukeed/preact-starter) **[Preact Redux Example](https://preact-redux-example.surge.sh)** :repeat:
Preact + Redux-Beispielprojekt, das eine einfache To-Do-Liste implementiert.
[GitHub Projekt](https://github.com/developit/preact-redux-example) **[Preact Without Babel](https://github.com/developit/preact-without-babel)** :horse:
Wie man Preact gänzlich ohne Babes, ES2015 oder JSX benutzt. **[preact-minimal](https://github.com/aganglada/preact-minimal)** :rocket:
Kleine Preact-Struktur mit allen nötigen Werkzeugen um direkt mit seinem Projekt zu Starten. ## Codepens - [Flickr-Browser](http://codepen.io/developit/full/VvMZwK/) _(@ CodePen)_ - [Text animieren](http://codepen.io/developit/full/LpNOdm/) _(@ CodePen)_ - [60FPS-Regenboxenspirale](http://codepen.io/developit/full/xGoagz/) _(@ CodePen)_ - [Simple Uhr](http://jsfiddle.net/developit/u9m5x0L7/embedded/result,js/) _(@ JSFiddle)_ - [3D + ThreeJS](http://codepen.io/developit/pen/PPMNjd?editors=0010) _(@ CodePen)_ ## Vorlage :zap: **[JSFiddle Template](https://jsfiddle.net/developit/rs6zrh5f/embedded/result/)** :zap: **[CodePen Template](http://codepen.io/developit/pen/pgaROe?editors=0010)** ================================================ FILE: content/de/about/libraries-addons.md ================================================ --- title: Bibliotheken & Add-ons --- # Bibliotheken & Add-ons Eine Auswahl an Modulen, die nahtlos mit Preact funktionieren. > :information_desk_person: _Eigenes Modul erstellt? > [Einfach hinzufügen!](https://github.com/preactjs/preact-www/blob/master/content/de/about/libraries-addons.md)_ ### Add-Ons - :raised_hands: **[preact-compat](https://github.com/preactjs/preact-compat)**: Jegliche React-Bibliothek mit Preact benutzen *([Vollständiges Beispiel](https://github.com/developit/preact-compat-example))* - :repeat: **[preact-cycle](https://github.com/developit/preact-cycle)**: Funktionalreaktives Paradigma für Preact - :page_facing_up: **[preact-render-to-string](https://github.com/preactjs/preact-render-to-string)**: Universelles Rendering. ### Komponenten - :earth_americas: **[preact-router](https://github.com/preactjs/preact-router)**: URL-Routing für eigene Komponenten - :bookmark_tabs: **[preact-markup](https://github.com/developit/preact-markup)**: HTML & eigene Elemente als JSX & Komponenten rendern - :satellite: **[preact-portal](https://github.com/developit/preact-portal)**: Rendern von Preact-Komponenten im (Welt-)Raum :milky_way: - :pencil: **[preact-richtextarea](https://github.com/developit/preact-richtextarea)**: Simple HTML-Editor-Komponente - :bookmark: **[preact-token-input](https://github.com/developit/preact-token-input)**: Textfeld, dass Eingabe für Zwecke wie z.B. Tags in Tokens übersetzt - :card_index: **[preact-virtual-list](https://github.com/developit/preact-virtual-list)**: Listen mit Millionen Reihen einfach rendern([demo](https://jsfiddle.net/developit/qqan9pdo/)) - :triangular_ruler: **[preact-layout](https://download.github.io/preact-layout/)**: Kleine und simple Layout-Bibliothek - :construction_worker: **[preact-helmet](https://github.com/download/preact-helmet)**: Ein Dokumentenkopf-Manager für Preact - :floppy_disk: **[preact-boot](https://gitlab.com/cromefire_/preact-boot)**: Einfache, deklarative [Bootstrap 4](https://getbootstrap.com/) Komponenten für preact ([Lies die Dokumentation!](https://preactboot.rtfd.io) (Englisch)). ### Integrationen - :thought_balloon: **[preact-socrates](https://github.com/matthewmueller/preact-socrates)**: Preact-Plugin für [Socrates](http://github.com/matthewmueller/socrates) - :rowboat: **[preact-flyd](https://github.com/xialvjun/preact-flyd)**: [flyd](https://github.com/paldepind/flyd) FRP-Streams in Preact + JSX benutzen - :speech_balloon: **[preact-i18nline](https://github.com/download/preact-i18nline)**: Das [i18n-js](https://github.com/everydayhero/i18n-js)-Ökosystem mit Preact mithilfe von [i18nline](https://github.com/download/i18nline) integrieren. - 🧩 **[ziko-wrapper](https://github.com/zakarialaoui10/ziko-wrapper)**: Wrap your [zikojs](https://github.com/zakarialaoui10/zikojs) components inside a Preact app — and vice versa. ### GUI Toolkits - :white_square_button: **[preact-mdl](https://github.com/developit/preact-mdl)**: [MDL](https://getmdl.io) als Preact-Komponenten benutzen - :rocket: **[preact-photon](https://github.com/developit/preact-photon)**: Schöne Desktop UIs mit [photon](http://photonkit.com) erstellen ### Testen - :microscope: **[preact-jsx-chai](https://github.com/developit/preact-jsx-chai)**: JSX-Behauptungen testen _(kein DOM, direkt in Node)_ - :white_check_mark: **[unexpected-preact](https://github.com/bruderstein/unexpected-preact)**: JSX-Behauptungen, Ereignisse, Momentaufnahmen in Jest _(DOM, funktioniert mit Node jsdom oder direkt von der Stange mit Jest)_ - [docs](https://bruderstein.github.io/unexpected-preact/) ### Dienstprogramme - :tophat: **[preact-classless-component](https://github.com/ld0rman/preact-classless-component)**: Preact-Komponenten ohne Klassenschlagwörter erstellen - :hammer: **[preact-hyperscript](https://github.com/queckezz/preact-hyperscript)**: Hyperscript-ähnliche Syntax zum Erstellen von Elementen - :white_check_mark: **[shallow-compare](https://github.com/tkh44/shallow-compare)**: Vereinfachtes `shouldComponentUpdate` Hilfsprogramm. ================================================ FILE: content/de/about/project-goals.md ================================================ --- title: Projektziele --- # Preacts Ziele ## Ziele Preact zielt darauf ab, Leistung aufgrund folgender Ziele zu liefern: - **Leistung:** Schnell und effizient rendern - **Größe:** Leichtigkeit und kleine Größe _(ungefähr 3.5kb)_ - **Effizienz:** Effektive Speichernutzung _(Wiederverwendung, GC-Müll verhindern)_ - **Verständlichkeit:** Die Grundlagen des Codes zu Verstehen sollte nicht länger als ein paar Stunden dauern - **Kompatibilität:** Preact zielt darauf ab, _Kompatibilität im großen Rahmen_ mit der React API zu erreichen. [preact-compat] versucht, die größtmögliche Kompatibilität mit React zu erzielen. ## Nicht-Ziele Einige Features von React wurden absichtlich nicht in Preact integriert, da sie entweder mit Berücksichtigung der oben genannten primären Projektziele nicht umsetzbar sind oder aber nicht in den Umfang von Preacts Grundausstattung an Funktionalitäten passen. - Die beabsichtigten Artikel unter [Was fehlt?](/guide/v8/differences-to-react#whats-missing): - PropTypes, die leicht als separate Bibliothek verwendet werden können - Children, da Preact immer children als Array verpackt - Synthetic Events, da Preact nicht versucht, Fehler in älteren Browsern (z.B. IE8) zu beheben [preact-compat]: https://github.com/preactjs/preact-compat/ ================================================ FILE: content/de/about/we-are-using.md ================================================ --- title: Wer benutzt Preact? --- # We Are Using Preact wird von einem breiten Spektrum von Webseiten verwendet: von Open Source-Projekten bis hin zu großen multinationalen Unternehmen. Nachfolgend ist ein kleiner Auszug von Unternehmen, die Preact für öffentliche Projekte benutzen: Benutzt Ihr Unternehmen Preact? [Fügen Sie es zur Liste hinzu!](https://github.com/preactjs/preact-www/blob/master/src/components/we-are-using/index.jsx)
================================================ FILE: content/de/guide/v8/api-reference.md ================================================ --- title: API-Referenzierung --- # API-Referenzierung --- --- ## `Preact.Component` `Component` ist eine Basisklasse, die normalerweise als Subklasse zum Erstellen von kraftvollen Preact-Komponenten verwendet wird. ### `Component.render(props, state)` Die `render()`-Funktion ist voraussetzend für alle Komponenten. Sie kann die props und states der Komponente inspizieren und sollte ein Preact-Element oder `null` zurückgeben. ```jsx import { Component } from 'preact'; class MeineKomponente extends Component { render(props, state) { // props === this.props // state === this.state return

Hello, {props.name}!

; } } ``` ### Lebenszyklusmethoden > _**Tipp:** Wenn du eigene HTML5-Elemente verwendert hast: diese ähneln sich mit den `attachedCallback`- und `detachedCallback`-Lebenszyklusmethoden._ Preact ruft die nachfolgenden Lebenszyklusmethoden auf, falls sie für eine Komponente definiert sind: | Lebenszyklusmethoden | Wann sie aufgerufen wird | |-----------------------------|--------------------------------------------------------------| | `componentWillMount` | bevor die Komponente an das DOM eingehanden wird | | `componentDidMount` | nachdem die Komponente an das DOM eingehanden wird | | `componentWillUnmount` | vor dem Entfernen vom DOM | | `componentWillReceiveProps` | bevor neue props angenommen werden | | `shouldComponentUpdate` | vor `render()`. `false` ausgeben, um Rendern zu überspringen | | `componentWillUpdate` | vor `render()` | | `componentDidUpdate` | nach `render()` | Alle Lebenszyklusmethoden und ihre Parameter werden in der folgenden Beispielkomponente angezeigt: ```js import { Component } from 'preact'; class MeineKomponente extends Component { shouldComponentUpdate(nextProps, nextState) {} componentWillReceiveProps(nextProps, nextState) { this.props // Previous props this.state // Previous state } componentWillMount() {} componentWillUpdate(nextProps, nextState) { this.props // Previous props this.state // Previous state } componentDidMount() {} componentDidUpdate() {} componentWillUnmount() { this.props // Current props this.state // Current state } } ``` ## `Preact.render()` `render(component, containerNode, [replaceNode])` Rendere eine Preact-Komponente in den `containerNode` DOM-Knoten. Gibt eine Referenz zum gerenderten DOM-Knoten aus. Wenn der optionale `replaceNode` DOM-Knoten gegeben ist und ein Child von `containerNode` ist, wird Preact dieses Element aktualisieren oder mit seinem Differenzierungsalgorithmus ersetzen. Andernfalls wird Preact das gerenderte Element zu `containerNode` hinzufügen. > ⚠️ Das `replaceNode`-Argument wird in der zukünftigen Preact `v11` Version entfernt. Es führt zu zu vielen Extrawürsten und Fehlern, die in anderen Teilen des Preact Codes berücksichtigt werden müssen. Dieser Teil der Dokumentation dient mehr zu historischen Zwecken, daher empfehlen wir die `render`-Funktion ohne dieses Argument zu benutzen. ```js import { render } from 'preact'; // Diese Beispiele zeigen, wie sich render() in einer Seite mit folgendem Inhalt verhält: //
//

My App

//
const container = document.getElementById('container'); render(MeineKomponente, container); // MeineKomponente zu Container hinzufügen // //
//

My App

// //
const existingNode = container.querySelector('h1'); render(MeineKomponente, container, existingNode); // MeineKomponente gegen

Meine App

differenzieren // //
// //
``` ## `Preact.h()` / `Preact.createElement()` `h(nodeName, attributes, [...children])` Gibt ein Preact Virtual DOM-Element mit den gegebenen `Attributen` wieder. Alle verbleibenden Argumente werden in einem `Children`-Array gesammelt. Dies können folgende Argumente sein: - Skalarwerte (string, number, boolean, null, undefined, etc) - Weitere Virtual DOM-Elemente - Grenzenlos verschachtelte Arrays der oberen Fälle ```js import { h } from 'preact'; h('div', { id: 'foo' }, 'Hallo!'); //
Hallo!
h('div', { id: 'foo' }, 'Hallo', null, ['Preact!']); //
Hallo Preact!
h( 'div', { id: 'foo' }, h('span', null, 'Hallo!') ); //
Hallo!
``` ================================================ FILE: content/de/guide/v8/differences-to-react.md ================================================ --- title: Unterschiede zu React --- # Unterschiede zu React Preact selbst soll keine Neuimplementation von React sein. Es gibt durchaus Unterschiede. Viele dieser Unterschiede sind trivial oder können mit der Nutzung von [preact-compat] komplett entfernt werden. Preact-compat ist eine dünne Schicht, die über Preact liegt und versucht, die 100%ige Kompatibilität mit React herzustellen. Preact ist nicht darauf ausgelegt, jede einzelne Funktion von React zu übernehmen, um **klein** und **fokussiert** zu bleiben - andernfalls würde es mehr Sinn ergeben, simple Optimierungen für das React-Projekt, welches bereits über eine sehr komplexe und gut architektierte Codebasis verfügt, einzureichen. --- --- ## Versionenkompatibilität Für Preact und [preact-compat] gilt: Versionenkompatibilität wird gegen die _aktuellen_ und _vorherigen_ Hauptveröffentlichungen von React gemessen. Wenn neue Funktionen vom React-Team angekündigt werden, werden sie, sollten sie mit den [Projektziele]n im Hinterkopf nutzvoll sein, zu Preacts Kern hinzugefügt. Dies ist ein recht demokratischer Prozess, der von sich konstant entwickelnden Diskussionen und Entscheidungen der Masse gezeichnet ist. Er lebt von Issues und Pull Requests. > Daher ist von React `0.14.x` und `15.x` gemeint, wenn auf der Website oder in der Dokumentation von Kompatibilität oder Vergleichen die Rede ist. ## Was ist inbegriffen? - [ES6 Class Components] - _Klassen ermöglichen einen expressiven Weg, zustandsorientierte Komponenten zu definieren_ - [High-Order Components] - _Komponenten, die andere Komponenten von `render()` ausgeben, effektiv sind dies Wrapper_ - [Stateless Pure Functional Components] - _Funktionen, die `props` als Argumente empfangen und JSX/VDOM ausgeben_ - [Contexts]: Support for `context` was added in Preact [3.0]. - _Kontext ist eine experimentelle React-Funktion, wurde aber von anderen Bibliotheken adoptiert._ - [Refs]: Support for function refs was added in Preact in [4.0]. String refs are supported in `preact-compat`. - _Refs bieten einen weg, gerenderte Elemente und Child-Komponenten zu rendern._ - Virtual DOM Diffing - _Quasi unabdingbar - Preacts Differenzierung ist simpel, aber effektiv und **[extrem](http://developit.github.io/js-repaint-perfs/) [schnell](https://localvoid.github.io/uibench/)**._ - `h()`, eine mehr generalisierte Version von `React.createElement` - _Diese Idee hieß ursprünglich [hyperscript] und war weit über das React-Ökosystem hinaus wertvoll, daher bewirbt Preact den originalen Standart. ([Lies: warum `h()`?](http://jasonformat.com/wtf-is-jsx))_ - _Außerdem ist lesbarer: `h('a', { href:'/' }, h('span', null, 'Home'))`_ ## Was ist hinzugefügt? Preact fügt durchaus vereinzelt nützliche Funktionen hinzu, die von dem Schaffen der React-Gemeinde inspiriert sind. - `this.props` und `this.state` werden an `render()` weitergegeben - _Man kann sie immer noch manuell referenzieren. Dieses Vorgehen ist einfach sauberer, insbesondere bei der [Destrukturierung]_ - Gestapelte Aktualisierungen des DOM, die mit `setTimeout(1)` zurückgegeben und verglichen werden, _(können außerdem requestAnimationFrame verwenden)_ - Man kann einfach `class` für CSS-Klassen verwenden. `className` wird zwar immer noch unterstützt, `class` wird aber präferiert. - Komponenten- und Elementenwiederverwendung- und pooling. ## Was fehlt? - [PropType] Validierung: Nicht jeder benutzt PropTypes, daher gehören sie nicht Preacts Kern an. - _**PropTypes sind vollständig durch** [preact-compat] **unterstützt**, können aber auch manuell verwendet werden._ - [Children]: Nicht notwendig in Preact, da `props.children` _immer ein Array_ ist. - _`React.Children` ist vollständig in [preact-compat] unterstützt._ - Synthetisch Ereignisse: Preacts Ziel in der Browserunterstützung setzt diesen zusätzlichen Mehraufwand nicht voraus. - _Preact nutzt das native `addEventListener` des Browsers für Ereignishandhabung. Unter [GlobalEventHandlers] ist eine vollständige Liste an DOM Ereignishandhabungen zu finden._ - _Eine vollständige Ereignisimplementierung würde mehr Wartung, Leistungseinbußen und eine größere API bedeuten._ ## Was ist anders? Preact und React haben einige feinere Unterschiede: - `render()` akzeptiert ein drittes Argument, welches der Grundknoten zu _replace_ ist, andernfalls fügt es es hinzu. Dies könnte sich in einer zukünftigen Version ein wenig ändern, vermutlich durch automatische Erkennung der Angemessenheit eines Ersatzrenders mithilfe einer Inspizierung des Grundknoten. - Komponenten implementieren `contextTypes` oder `childContextTypes` nicht. Children empfangen alle `context`-Einträge von `getChildContext()`. [Projektziele]: /about/project-goals [hyperscript]: https://github.com/dominictarr/hyperscript [3.0]: https://github.com/preactjs/preact/milestones/3.0 [4.0]: https://github.com/preactjs/preact/milestones/4.0 [preact-compat]: https://github.com/preactjs/preact-compat [PropType]: https://github.com/developit/proptypes [Contexts]: https://facebook.github.io/react/docs/context.html [Refs]: https://facebook.github.io/react/docs/more-about-refs.html [Children]: https://facebook.github.io/react/docs/top-level-api.html#react.children [GlobalEventHandlers]: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers [ES6 Class Components]: https://facebook.github.io/react/docs/reusable-components.html#es6-classes [High-Order Components]: https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750 [Stateless Pure Functional Components]: https://facebook.github.io/react/docs/reusable-components.html#stateless-functions [Destrukturierung]: http://www.2ality.com/2015/01/es6-destructuring.html [Linked State]: /guide/v8/linked-state ================================================ FILE: content/de/guide/v8/extending-component.md ================================================ --- title: Kompontente erweitern --- # Komponente erweitern Es besteht die Möglichkeit, dass manche Projekte eine Komponente mit zusätzlichen Funktionalitäten erweitern wollen. Der Stellenwert von Vererbung in JavaScript ist umstritten, wenn man allerdings eine eigene "Basisklasse" erstellen will, von der alle anderen Komponenten erben, ist Preact genau richtig. Möglicherweise ist das Erstellen von automatischen Verbindungen zu Stores/Reducers in einer Flux-ähnlichen Architektur gewünscht. Vielleicht mag man es auch, Eigentums-basierte Mixins hinzuzufügen, damit es sich mehr wie `React.createClass` anfühlt _(Anmerkung: der [@`bind` decorator](https://github.com/developit/decko#bind) ist bevorzugt)_. In jedem Fall ist die Klassenvererbbarkeit aus ES2015 anwendbar, um Preacts `Component`-Klasse zu erweitern: ```js class BoundComponent extends Component { // example: Gebundene Methoden erfassen binds() { let list = this.bind || [], binds = this._binds; if (!binds) { binds = this._binds = {}; for (let i=list.length; i--; ) { binds[list[i]] = this[list[i]].bind(this); } } return binds; } } ``` Anwendungsbeispiel: ```js class Link extends BoundComponent { bind = ['click']; click() { open(this.props.href); } render({ children }) { let { click } = this.binds(); return { children }; } } render( Click mich, document.body ); ``` Die Möglichkeiten sind unendlich. Hier ist eine erweiterte `Component`-Klasse, die rudimentäre Mixins unterstützt: ```js class MixedComponent extends Component { constructor() { super(); (this.mixins || []).forEach( m => Object.assign(this, m) ); } } ``` --- > **Fußnote:** Man sollte anmerken, dass Vererbung in zerbrechliche parent-child-Beziehungen mit ihren entsprechenden Problemen führen kann. Für eine Programmieraufgabe, die adäquat mit Vererbung gelöst werden kann, gibt es oftmals einen funktionaleren Weg um das gleiche Ziel zu erreichen. Dies macht das Erstellen solcher Beziehungen unnötig. ================================================ FILE: content/de/guide/v8/external-dom-mutations.md ================================================ --- title: Externe DOM-Mutationen --- # Externe DOM-Mutationen --- --- ## Übersicht Manchmal ist es nötig, mit Drittanbieterbibliotheken zu arbeiten, die erwarten, frei im DOM mutieren zu können, in einem Stadium zu verharren oder überhaupt gar keine Komponentengrenzen zu haben. Es gibt viele großartige UI-Toolkits und wiederverwendbare Elemente, die so funktionieren. In Preact, ähnlich wie auch React, setzt das Arbeiten mit diesen Bibliotheken voraus, dass man dem Rendering oder der Differenzierungsalgorithmus des Virtual DOM befiehlt, keine externen DOM-Mutationen innerhalb einer bestimmten Komponente (oder seinem DOM-Element) _rückgängig_ zu machen. ## Technik Dies funktioniert ganz einfach indem man eine `shouldComponentUpdate()`-Methode in einer Komponente definiert und diese `false` zurückgeben lässt. ```js class Block extends Component { shouldComponentUpdate() { return false; } } ``` ... oder in Kurzform: ```js class Block extends Component { shouldComponentUpdate = () => false; } ``` Mit diesem Eingriff in den Lebenszyklus und der Anweisung an Preact, die Komponente nicht zu rendern, wenn sich etwas im VDOM-Baum ändert, hat die Komponente nun eine Referenz in seinem DOM-Stammelement, das solange als statisch angesehen werden kann, bis die Komponente unmounted ist. Genau wie bei jeder Komponente wird diese Referenz einfach `this.base` genannt. Sie korrespondiert mit dem JSX-Stammelement, das von `render()` zurückgegeben wurde. ## Beispieldurchlauf Hier wird beispielhaft gezeigt, wie das Rerendern einer Komponente "ausgeschaltet" wird. Es muss beachtet werden, dass `render()` immer noch im Zuge von Erstellung und Mounten der Komponente aufgerufen wird, damit seine ursprüngliche DOM-Struktur generiert werden kann. ```js class Beispiel extends Component { shouldComponentUpdate() { // Nicht via diff rerendern: return false; } componentWillReceiveProps(nextProps) { // Irgendetwas mit eingehenden props kann hier erledigt werden, falls benötigt } componentDidMount() { // jetzt gemounted, kann das DOM frei modifizieren: let thing = document.createElement('maybe-a-custom-element'); this.base.appendChild(thing); } componentWillUnmount() { // Komponente ist kurz davor, vom DOM entfernt zu werden. Aufräumarbeiten sind hier möglich. } render() { return
; } } ``` ## Beispiele aus der realen Welt Alternativ kann diese Technik bei [preact-token-input](https://github.com/developit/preact-token-input/blob/master/src/index.js) im Einsatz bewundert werden - es benutzt eine Komponente als Halt im DOM, umgeht aber Aktualisierungen und lässt [tags-input](https://github.com/developit/tags-input) von dort aus übernehmen. Ein komplexeres Beispiel wäre [preact-richtextarea](https://github.com/developit/preact-richtextarea). Es benutzt diese Technik, um das Rerendern eines bearbeitbaren `