Skip to content

Instantly share code, notes, and snippets.

@trickster

trickster/*Preact Without Build Tools.md

Forked from developit/*Preact Without Build Tools.md
Created October 24, 2022 12:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save trickster/b9424d3c2138f4e153072192b91f2686 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save trickster/b9424d3c2138f4e153072192b91f2686 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @developit developit revised this gist May 9, 2022. 4 changed files with 28 additions and 21 deletions.
    4 changes: 4 additions & 0 deletions *Preact Without Build Tools.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    # 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](https://unpkg.com/htm@3.1.1/preact/standalone.mjs).
    13 changes: 13 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Preact Without Tooling</title>
    <style>
    ul { list-style: none; padding: 0; }
    label { padding: 5px; display: flex; gap: 5px; }
    </style>
    </head>
    <body>
    <script type="module" src="./main.js"></script>
    </body>
    </html>
    18 changes: 11 additions & 7 deletions app.js → main.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    import { render } from 'https://esm.sh/preact@10.17.2';
    import { useState } from 'https://esm.sh/preact@10.17.2/hooks';
    import { render } from 'https://esm.sh/preact@10.7.2';
    import { useState, useCallback } from 'https://esm.sh/preact@10.7.2/hooks';
    import { html } from 'https://esm.sh/htm@3.0.4/preact';

    const INITIAL_TODOS = [
    @@ -9,7 +9,9 @@ const INITIAL_TODOS = [
    ];

    function App() {
    const [todos, setTodos] = useState([]);
    const [todos, setTodos] = useState(INITIAL_TODOS);

    console.log(todos);

    const add = useCallback(e => {
    const text = e.target.todo.value;
    @@ -24,7 +26,7 @@ function App() {
    return html`
    <div class="app">
    <form action="javascript:" onSubmit=${add}>
    <input name="todo" />
    <input name="todo" placeholder="Add Todo [enter]" />
    </form>
    <ul>
    ${todos.map(todo => html`
    @@ -43,10 +45,12 @@ function Todo({ todo, onChange }) {

    return html`
    <li>
    <input type="checkbox" checked=${todo.done} onClick=${toggle} />
    ${todo.text}
    <label>
    <input type="checkbox" checked=${todo.done} onClick=${toggle} />
    ${todo.text}
    </label>
    </li>
    `;
    }

    render(html`<${App} />`, document.body);
    render(html`<${App} />`, document.body);
    14 changes: 0 additions & 14 deletions preact.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +0,0 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Preact Without Tooling</title>
    <style>
    ul { list-style: none; }
    li { padding: 5px; }
    input[type="checkbox"] { margin-right: 10px; }
    </style>
    </head>
    <body>
    <script type="module" src="./app.js"></script>
    </body>
    </html>
  2. @developit developit created this gist May 9, 2022.
    52 changes: 52 additions & 0 deletions app.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,52 @@
    import { render } from 'https://esm.sh/preact@10.17.2';
    import { useState } from 'https://esm.sh/preact@10.17.2/hooks';
    import { html } from 'https://esm.sh/htm@3.0.4/preact';

    const INITIAL_TODOS = [
    { text: 'add HTM imports', done: true },
    { text: 'remove bundler', done: true },
    { text: 'write code', done: false }
    ];

    function App() {
    const [todos, setTodos] = useState([]);

    const add = useCallback(e => {
    const text = e.target.todo.value;
    setTodos(todos => todos.concat({ text, done: false }));
    }, []);

    const updateTodo = useCallback(todo => {
    // we update the todo in-place, so just invalidate the list to re-render:
    setTodos(todos => todos.slice());
    }, []);

    return html`
    <div class="app">
    <form action="javascript:" onSubmit=${add}>
    <input name="todo" />
    </form>
    <ul>
    ${todos.map(todo => html`
    <${Todo} todo=${todo} onChange=${updateTodo} />
    `)}
    </ul>
    </div>
    `;
    }

    function Todo({ todo, onChange }) {
    const toggle = useCallback(e => {
    todo.done = !todo.done;
    onChange();
    }, []);

    return html`
    <li>
    <input type="checkbox" checked=${todo.done} onClick=${toggle} />
    ${todo.text}
    </li>
    `;
    }

    render(html`<${App} />`, document.body);
    14 changes: 14 additions & 0 deletions preact.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Preact Without Tooling</title>
    <style>
    ul { list-style: none; }
    li { padding: 5px; }
    input[type="checkbox"] { margin-right: 10px; }
    </style>
    </head>
    <body>
    <script type="module" src="./app.js"></script>
    </body>
    </html>