Template strings allow you to inject dynamic data (including other components) via template literal placeholders ${}.

`js
export default function phantomComponent() {
const slices
return

`

| 👻   We recommend the leet-html VSCode extension for HTML string highlighting. |
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

`js
import { createPhantomStore } from "@sidiousvic/phantom";

const data = { slices: ["🍕", "🍕", "🍕"] };

function reducer(state = data, action) {
switch (action.type) {
case "EAT_SLICE": // remove a slice from array
return { ...state, slices: state.slices.slice(0, -1) };
default:
return state;
}
}

const phantomStore = createPhantomStore(reducer);

export default phantomStore;
`

`js
import phantom from "@sidiousvic/phantom";
import phantomComponent from "./phantomComponent.js";
import phantomStore from "./phantomStore.js";

const { appear } = phantom(phantomComponent, phantomStore);

appear(); // 3, 2, 1... 💥 initial render!
`

Phantom will expose the appear method. 💥

appear will perform the initial DOM render on call, your UI's first _apparition_. 👻

`js
import phantom from "@sidiousvic/phantom";
import phantomComponent from "./phantomComponent.js";
import phantomStore from "./phantomStore.js";

const { appear, data, fire } = phantom(phantomComponent, phantomStore);

appear(); // 3, 2, 1... 🚀 initial render!
`

data and fire are pointers to the Phantom store.

`js
const { slices } = data();
`

Data can be passed as arguments to child components.

`js
function phantomComponent() {
const { slices } = data();
return
${Pizza(slices)}
;
}
`

You can use template literal placeholders to inject pieces of state into a component.

`js
export default function Pizza(slices) {
return

An action is an object with a type key and optional data payload.

fire takes an action and dispatches it to the phantomStore, triggering a state change.

Phantom will update the DOM on every fire(action).

`js
document.addEventListener("click", eatPizza);

function eatPizza(e) {
if (e.target.id === "slices-h1") {
fire({ type: "EAT_PIZZA" }); // DOM will update
}
}
`

`js
return ${yourData};
`

- [x] Include a data-phantom attribute with the piece(s) of state that you want to subscribe to.
- [x] An id attribute.

Phantom will look at at both the data-phantom and id attributes in order to compute if a DOM node has to be repainted.

| ⚠️   If you don't do this, Phantom will repaint the entire DOM on data updates. |
| :----------------------------------------------------------------------------------- |