Skip to content

Instantly share code, notes, and snippets.

Avatar
🦊
write, the codes

Jason Miller developit

🦊
write, the codes
11.4k followers · 349 following
View GitHub Profile
@developit
developit / *preact-options-helper.md
Last active Oct 13, 2022
View *preact-options-helper.md 
import { hook, OptionsTypes } from './preact-options-helper.ts';

hook(OptionsTypes.RENDER, (old, vnode) => {
    let component = vnode.__c;
    if (component) {
        // do stuff with the component instance
    } else {
        console.log(vnode.props);
 }
@developit
developit / index.html
Last active Jun 7, 2022
bare-bones exhaust() vs ternary #jsbench #jsperf #jsbench #jsperf (https://jsbench.github.io/#ec47bed3cf0e424b78bdbc4d71cdd3a3) #jsbench #jsperf
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>bare-bones exhaust() vs ternary #jsbench #jsperf #jsbench #jsperf</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>
@developit
developit / index.html
Last active Jun 7, 2022
exhaust() vs ternary #jsbench #jsperf (https://jsbench.github.io/#3b6dbcf299369a9916a06f2e338e74bb) #jsbench #jsperf
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>exhaust() vs ternary #jsbench #jsperf</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>
@developit
developit / *Preact Without Build Tools.md
Last active Nov 5, 2022
View *Preact Without Build Tools.md

Preact, Without Build Tools

This is a demonstration of using Preact without any build tooling. The library is linked from the esm.sh CDN, however a standalone JS file exporting HTM + Preact + Hooks can also be downloaded here.

@developit
developit / *Preact Root Fragment - replaceNode for Preact 11+.md
Last active Oct 3, 2022
View *Preact Root Fragment - replaceNode for Preact 11+.md

preact-root-fragment: partial root rendering for Preact

This is a standalone Preact 10+ implementation of the deprecated replaceNode parameter from Preact 10.

It provides a way to render or hydrate a Preact tree using a subset of the children within the parent element passed to render():

<body>
  <div id="root">  ⬅ we pass this to render() as the parent DOM element...
@developit
developit / entry.client.jsx
Created Dec 16, 2021
View entry.client.jsx
import ReactDOM from "react-dom";
import { RemixBrowser } from "remix";
// hydrate a fake Document with the patch:
ReactDOM.hydrate(<RemixBrowser />, {
childNodes: [document.documentElement],
firstChild: document.documentElement,
appendChild(n) { document.replaceChild(n, document.documentElement); },
insertBefore(n) { this.appendChild(n); }
});
@developit
developit / hydrate-root.js
Created Sep 24, 2021
View hydrate-root.js
import { h, hydrate } from 'preact';
let C = 0;
export function Root({ href, data, children }) {
let json = data && JSON.stringify(data);
let id = 'root:'+++C;
return [
h(`!--${id}--`),
children,
h('component-root', { href, id },
@developit
developit / *preact-async-component.md
Last active Apr 8, 2021
View *preact-async-component.md

AsyncComponent for preact

This is the guts of preact-cli's import X from 'async!./x' feature, extracted into a standalone library.

It creates a wrapper component that, when rendered, lazy-loads your real component. While loading, any SSR'd DOM is preserved intact.

Option 1: lazy()

This is the API of React.lazy() or preact-iso's lazy(), but it does not use Suspense.

@developit
developit / *Rendering Interactive HTML using Preact.md
Last active Feb 21, 2022
View *Rendering Interactive HTML using Preact.md

Rendering Interactive HTML using Preact

It's possible to render HTML in Preact using the dangerouslySetInnerHTML prop, however doing so bypasses the Virtual DOM entirely. This may be reasonable for static HTML, but interactivity can be a little painful to graft on without VDOM.

There is another technique available that melds HTML to Virtual DOM without such limitations.

Enter DOMParser

@developit
developit / *jsx.js.md
Last active Mar 8, 2021
View *jsx.js.md

Horrible JSX Transform

import { jsx } from './jsx.js';

const out = jsx(`
  const App = props => (
    <div class="app">
      <h1>Hello {"World"}</h1>
      <ul>{['a','b','c'].map(item => <li>{item}</li>)}</ul>