diff --git a/.github/workflows/compressed-size.yml b/.github/workflows/compressed-size.yml new file mode 100644 index 0000000..30195d3 --- /dev/null +++ b/.github/workflows/compressed-size.yml @@ -0,0 +1,13 @@ +name: Compressed Size + +on: [pull_request] + +jobs: + build: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v2 + - uses: preactjs/compressed-size-action@v2 + with: + pattern: "./{dist,mini,react,preact}/{index.js,index.mjs,htm.js,htm.mjs,standalone.js,standalone.mjs}" diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml new file mode 100644 index 0000000..f23f7fe --- /dev/null +++ b/.github/workflows/test.yml @@ -0,0 +1,25 @@ +name: Unit Tests + +on: [pull_request, push] + +jobs: + build: + runs-on: ubuntu-latest + strategy: + matrix: + # Change the condition for ESM Dist Test below when changing this. + node-version: [12.x, 14.x] + steps: + - name: Checkout + uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - name: Install + run: npm install + - name: Build and Test + run: npm test + - if: matrix.node-version == '14.x' + name: ESM Dist Test + run: npm run test:dist diff --git a/.gitignore b/.gitignore index a32229b..fbca3fd 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,4 @@ package-lock.json dist mini yarn.lock +htm.tgz diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 965fe2d..0000000 --- a/.travis.yml +++ /dev/null @@ -1,3 +0,0 @@ -language: node_js -node_js: node -cache: npm diff --git a/README.md b/README.md index 1dce010..6763017 100644 --- a/README.md +++ b/README.md @@ -28,9 +28,9 @@ It uses standard JavaScript [Tagged Templates] and works in [all modern browsers The syntax you write when using HTM is as close as possible to JSX: -- Spread props: `
` +- Spread props: `
` instead of `
` - Self-closing tags: `
` -- Components: `<${Foo}>` _(where `Foo` is a component reference)_ +- Components: `<${Foo}>` instead of `` _(where `Foo` is a component reference)_ - Boolean attributes: `
` @@ -66,7 +66,7 @@ const html = htm.bind(React.createElement); ```js // just want htm + preact in a single file? there's a highly-optimized version of that: -import { html, render } from 'https://unpkg.com/htm/preact/standalone.mjs' +import { html, render } from 'https://unpkg.com/htm/preact/standalone.module.js' ``` ## Usage @@ -75,7 +75,7 @@ If you're using Preact or React, we've included off-the-shelf bindings to make y They also have the added benefit of sharing a template cache across all modules. ```js -import { render } from 'preact'; +import { render } from 'preact'; import { html } from 'htm/preact'; render(html`Hello!`, document.body); ``` @@ -83,7 +83,7 @@ render(html`Hello!`, document.body); Similarly, for React: ```js -import ReactDOM from 'react-dom'; +import ReactDOM from 'react-dom'; import { html } from 'htm/react'; ReactDOM.render(html`Hello!`, document.body); ``` @@ -153,6 +153,14 @@ console.log(html` // ] ``` +### Caching + +The default build of `htm` caches template strings, which means that it can return the same Javascript object at multiple points in the tree. If you don't want this behaviour, you have three options: + +* Change your `h` function to copy nodes when needed. +* Add the code `this[0] = 3;` at the beginning of your `h` function, which disables caching of created elements. +* Use `htm/mini`, which disables caching by default. + ## Example Curious to see what it all looks like? Here's a working app! @@ -164,7 +172,7 @@ It's a single HTML file, and there's no build or tooling. You can edit it with n htm Demo