JLarky

/**
 * @type {import('prettier').Options}
 */
module.exports = {
  plugins: [require.resolve('prettier-plugin-astro')],

  overrides: [
    {
      files: '**/*.astro',
      options: { parser: 'astro' }

JLarky

delay 2004
delay 1003
delay2 1002
delay 1001

JLarky

so we have tes.jsx:

export default function SearchField() {
  return (
    <form>
      <label>1</label>
      <input id="sidebar-search-input" />
    </form>
  );

JLarky

Comparing install speed with cached deps

lower is better

Data

NPM

JLarky

SolidJS Context

By using ReturnType we don't have to manually write ContextType

See React gist for more examples https://gist.github.com/JLarky/5a1642abd8741f2683a817f36dd48e78

And original tweet https://twitter.com/JLarky/status/1554157252856033280

JLarky

-rw-r--r--  1 jlarky  wheel  22137 Aug  6 17:44 index.html.gz
-rw-r--r--  1 jlarky  wheel  19815 Aug  6 17:45 rest.html.gz
-rw-r--r--  1 jlarky  wheel   2347 Aug  6 17:46 script.html.gz

So

19815+2347 = 22162 vs

JLarky

Type-Safe React Context

By using ReturnType we don't have to manually write type for Context

See also gist for SolidJS https://gist.github.com/JLarky/a46055f673a2cb021db1a34449e3be07

And original tweet https://twitter.com/JLarky/status/1554152932425117697

JLarky

Why is useFormStatus always returning pending false?

So you are trying out that new fangled useFormStatus hook but it doesn't actually react to the status of your form?

Now you tried to Google it and all you get is RTFM "go read docs again". Because hook useFormStatus shows you the status of parent form, not a sibling one.

Let's explain that in English.

• <form><Spinner></form> works
• `` doesn't

JLarky

I created this demo :)

The main point is that it allows you to compare two apps, one is in React, one in HTMX. Then I introduce this concept of "hey, what if I wanted to store data in HTML or markdown or whatever instead of just text, how would I do that in HTMX? The main idea is that modern backend frameworks (in this case Astro) allow you to work with HTML pretty safely, but you still have to be careful with HTMX specifically because data- attributes are executable in HTMX 🫠, but I have an example how to workaround it as well :)

here are the shadow banned tweets :)

JLarky

<div title="hi">
    <Suspense>
        <ClientComponent prop={await 123}>
    </Suspense>
</div>

<ClientRoot url="/" />

next 12: send from server to client: ["client.js", {url: '/'}]
^^