[HYPERAPP] hyperapp-tutorial-step-1 (ok)

https://codesandbox.io/s/gq662

C:\xampp\htdocs\hyperlist\index.js

import { h, app } from "hyperapp"
// -- EFFECTS & SUBSCRIPTIONS --
// -- ACTIONS --
// -- VIEWS ---
const emphasize = (word, string) =>
  string.split(" ").map(x => {
    if (x.toLowerCase() === word.toLowerCase()) {
      return h("em", {}, x + " ")
    } else {
      return x + " "
    }
  })
const storyThumbnail = props =>
  h(
    "li", {
      class: {
        unread: props.unread,
          reading: props.reading,
      },
    },
    [
      h("p", { class: "title" }, emphasize(props.filter, props.title)),
      h("p", { class: "author" }, props.author),
    ],
  )
const storyList = props =>
  h("div", { class: "stories" }, [
    h(
      "ul", {},
      Object.keys(props.stories).map(id =>
        storyThumbnail({
          id,
          title: props.stories[id].title,
          author: props.stories[id].author,
          unread: !props.stories[id].seen,
          reading: props.reading === id,
          filter: props.filter,
        }),
      ),
    ),
  ])
const filterView = props =>
  h("div", { class: "filter" }, [
    "Filter:",
    h("span", { class: "filter-word" }, props.filter),
    h("button", {}, "\u270E"),
  ])
const storyDetail = props =>
  h("div", { class: "story" }, [
    props && h("h1", {}, props.title),
    props &&
    h(
      "p", {},
      `Lorem ipsum dolor sit amet, consectetur adipiscing
                elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, qui
                nostrud exercitation ullamco laboris nisi ut aliquip
                ex ea commodo consequat.`,
    ),
    props && h("p", { class: "signature" }, props.author),
  ])
const autoUpdateView = props =>
  h("div", { class: "autoupdate" }, [
    "Auto update: ",
    h("input", { type: "checkbox" }),
  ])
const container = content => h("div", { class: "container" }, content)
// -- RUN --
app({
  node: document.getElementById("app"),
  init: {
    filter: "ocean",
    reading: "113",
    stories: {
      "112": {
        title: "The Ocean is Sinking",
        author: "Kat Stropher",
        seen: false,
      },
      "113": {
        title: "Ocean life is brutal",
        author: "Surphy McBrah",
        seen: true,
      },
      "114": {
        title: "Family friendly fun at the ocean exhibit",
        author: "Guy Prosales",
        seen: true,
      },
    },
  },
  view: state =>
    container([
      filterView(state),
      storyList(state),
      storyDetail(state.reading && state.stories[state.reading]),
      autoUpdateView(state),
    ]),
})

C:\xampp\htdocs\hyperlist\index.html

C:\xampp\htdocs\hyperlist\package.json

C:\xampp\htdocs\hyperlist\style.css

Previous[HYPERAPP] Hyperapp - JavaScript micro-framework chỉ 1kB (ok)Next[HYPERAPP] hyperapp-tutorial-step-2 (ok)

Last updated