Preactの環境構築 of 2020

const HtmlWebpackPlugin = require("html-webpack-plugin")
const path = require("path")

module.exports = {
  mode: process.env.NODE_ENV,
  entry: "./src/index.tsx",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "build.js",
  },
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        use: [
          {
            loader: "ts-loader",
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".js", ".ts", ".tsx", ".css", ".gif", ".json", ".png", ".mp4"],
  },
  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
  devServer: {
    historyApiFallback: true,
  },
}

$ npx tsc --init

import { h, render } from "preact"

const Main = () => {
  return <div>hello world!</div>
}

render(<Main></Main>, document.body)

TS17004: Cannot use JSX unless the '--jsx' flag is provided.

TS2686: 'React' refers to a UMD global, but the current file is a module.
Consider adding an import instead.

import React from 'react'

{
  "compilerOptions": {
    "jsxFactory": "h",
    "jsx" : "react"
    ...
}

{
  "compilerOptions": {
    "jsxFactory": "h",
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

import Router from "preact-router";
import { h, render } from "preact";
/** @jsx h */

const Main = () => (
  <Router>
    <Home path="/" />
    <About path="/about" />
    // Advanced is an optional query
    <Search path="/search/:query/:advanced?" />
  </Router>
);

render(<Main />, document.body);

type '{ path: string; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'path' does not exist on type 'IntrinsicAttributes'.ts(2322)

<Router>
  <Route path="/" component={Home}></Route>
  <Route path="/:id" component={Detail}></Route>
</Router>

import { useReducer } from "preact/compat";

export const TodoDispatchContext = createContext<{
  dispatch: (action: ActionType) => void;
}>({ dispatch: () => {} });

// action type

import { TodoType } from "../type"

const SELECT_TODO = "SELECT_TODO"
const SAVE_TODO = "SAVE_TODO"

const actionTypes = {
  SELECT_TODO,
  SAVE_TODO,
} as const

// action

const selectTodo = (todo: TodoType) => ({
  type: actionTypes.SELECT_TODO,
  payload: todo,
})
const saveTodo = (todo: TodoType) => ({
  type: actionTypes.SAVE_TODO,
  payload: todo,
})

export const actions = {
  selectTodo,
  saveTodo,
}

export type ActionType =
  | ReturnType<typeof selectTodo>
  | ReturnType<typeof saveTodo>

// store
export type StoreType = {
  selectedTodo: TodoType | null
  todos: TodoType[]
}

export const initialState: StoreType = {
  selectedTodo: null,
  todos: [],
}

export default (state: StoreType, action: ActionType): StoreType => {
  switch (action.type) {
    case "SELECT_TODO":
      return { ...state, selectedTodo: action.payload }
    case "SAVE_TODO":
      return { ...state, todos: [...state.todos, action.payload] }
    default:
      throw new Error("unexpected action type")
  }
}

import { createContext } from "preact"
import { StoreType, ActionType, initialState } from "../reducer/TodoReducer"

export const TodoStateContext = createContext<{
  state: StoreType
}>({ state: initialState })

export const TodoDispatchContext = createContext<{
  dispatch: (action: ActionType) => void
}>({ dispatch: () => {} })

import { h, render } from "preact"
import { useReducer } from "preact/hooks"
import { Router, Route } from "preact-router"
import reducer, { initialState } from "./reducer/TodoReducer"
import { TodoStateContext, TodoDispatchContext } from "./context/TodoCotext"
import { Todos } from "./pages/Todos"
import { Detail } from "./pages/Detail"

const Main = () => {
  const [state, dispatch] = useReducer(reducer, initialState)

  return (
    <TodoStateContext.Provider value={{ state }}>
      <TodoDispatchContext.Provider value={{ dispatch }}>
        <Router>
          <Route path="/" component={Todos}></Route>
          <Route path="/todos/:id" component={Detail}></Route>
        </Router>
      </TodoDispatchContext.Provider>
    </TodoStateContext.Provider>
  )
}

render(<Main></Main>, document.body)

import { h } from "preact"
import { useContext } from "preact/hooks"
import { Link } from "preact-router"
import { TodoStateContext, TodoDispatchContext } from "../context/TodoCotext"
import { actions } from "../reducer/TodoReducer"
import { genRandomId } from "../helper"
import { Item } from "../component/Item"

export const Todos = () => {
  const todoStateContext = useContext(TodoStateContext)
  const todoDispatchContext = useContext(TodoDispatchContext)
  const { state } = todoStateContext
  const { dispatch } = todoDispatchContext
  return (
    <div>
      <hi>TODO LIST</hi>
      <div>
        {state.todos.map(todo => (
          <Link
            href={`/todos/${todo.id}`}
            onClick={() => {
              dispatch(actions.selectTodo(todo))
            }}
          >
            <Item data={todo} key={todo.id}></Item>
          </Link>
        ))}
      </div>
      <form
        onSubmit={e => {
          e.preventDefault()
          try {
            // @ts-ignore
            const todo = e.target.todo.value as string
            const id = genRandomId()
            dispatch(actions.saveTodo({ id, todo }))
          } catch (e) {
            console.error(e)
            alert("入力の保存に失敗しました。")
          }
        }}
      >
        <Input name="todo"></Input>
        <button>submit</button>
      </form>
    </div>
  )
}

import { styled } from "goober";
import { Item as _Item } from "../component/Item";

const Item = styled(_Item)`
  border: solid 1px #ccc;
  border-radius: 8px;
  margin: 4px 12px;
  @media screen and (max-width: 450px) {
    flex-direction: column;
    margin: 12px 0px;
  }
`;

<div className={props.className} />

const Items = styled("div")`
  display: flex;
  flex-direction: row;
  @media screen and (max-width: 450px) {
    flex-direction: column;
  }
`;

import { glob } from "goober";

glob`
  *,
  *:after,
  *:before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
  }

  html {
    font-size: 62.5%;
  }

  body {
    box-sizing: border-box;
  }
`;