preact + ts + gooberの童話

16766 ワード

preact goober typescript storybook テキストリンク

セットアップセットアップ

preact、tsとgooberでコンポーネントを作成します.

import { h } from "preact"
import { styled } from "goober"

const _Button = styled("button")`
  background-color: red;
`

export const Button = () => {
  return <_Button>ok</_Button>
}

次に、童話の物語を作成します.

npx sb init

import { h } from "preact"
import { Button } from "./button"

export default {
  title: "custom/Button",
  component: Button,
  argTypes: {
    backgroundColor: { control: "color" },
    onClick: { action: "onClick" },
  },
}

const Template = (args: any) => <Button {...args} />

export const Primary = Template.bind({})

これを起動します.

npm run storybook

この話を見ましょう.この失敗ビューが表示されます.

h is not defined
ReferenceError: h is not defined
    at Object.Template (http://192.168.0.3:6006/main.4bde6a78d76d85c8a393.bundle.js:353:3)
    at finalStoryFn (http://192.168.0.3:6006/vendors~main.4bde6a78d76d85c8a393.bundle.js:16622:32)
    at http://192.168.0.3:6006/vendors~main.4bde6a78d76d85c8a393.bundle.js:13062:21
    at http://192.168.0.3:6006/vendors~main.4bde6a78d76d85c8a393.bundle.js:14861:14
    at wrapper (http://192.168.0.3:6006/vendors~main.4bde6a78d76d85c8a393.bundle.js:12801:12)
    at http://192.168.0.3:6006/vendors~main.4bde6a78d76d85c8a393.bundle.js:13580:14
    at http://192.168.0.3:6006/vendors~main.4bde6a78d76d85c8a393.bundle.js:13594:26
    at http://192.168.0.3:6006/vendors~main.4bde6a78d76d85c8a393.bundle.js:13062:21
    at http://192.168.0.3:6006/vendors~main.4bde6a78d76d85c8a393.bundle.js:14854:12
    at http://192.168.0.3:6006/vendors~main.4bde6a78d76d85c8a393.bundle.js:14861:14

一方、生成されたストーリーファイルnpx sb init が成功する.

なぜこの例の成功は、私の物語を表示するに失敗です.

成功コンポーネントを見てみましょう

第一に、preactは童話の公式によってサポートされています.
参考:https://www.npmjs.com/package/@storybook/preact
そういうわけで、私たちは模範的な物語ファイルをnpx sb init .このコンポーネントを見てみましょう.

/** @jsx h */
import { h } from "preact"
import PropTypes from "prop-types"
import "./button.css"

/**
 * Primary UI component for user interaction
 */
export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
  const mode = primary
    ? "storybook-button--primary"
    : "storybook-button--secondary"
  return (
    <button
      type="button"
      className={["storybook-button", `storybook-button--${size}`, mode].join(
        " "
      )}
      style={backgroundColor && { backgroundColor }}
      {...props}
    >
      {label}
    </button>
  )
}

Button.propTypes = {
  /**
   * Is this the principal call to action on the page?
   */
  primary: PropTypes.bool,
  /**
   * What background color to use
   */
  backgroundColor: PropTypes.string,
  /**
   * How large should the button be?
   */
  size: PropTypes.oneOf(["small", "medium", "large"]),
  /**
   * Button contents
   */
  label: PropTypes.string.isRequired,
  /**
   * Optional click handler
   */
  onClick: PropTypes.func,
}

Button.defaultProps = {
  backgroundColor: null,
  primary: false,
  size: "medium",
  onClick: undefined,
}

私のコンポーネントの間にいくつか異なる点があります.

tsではなく、jsです.

最初の行のJSXプラグマ.

JSSでCSSを使用しないでください

それらのポイントは、ちょうど私の話が機能しない理由です.

JSXファクトリ

何が/ jsx h /

これはJSXプラグマと呼ばれます.これはコンパイラにJSXファクトリを指示します.例えば、反応のJSX工場はcreateElement , PRECTのJSX工場はh , しかし、コンパイラはそれを知りません.

ストーリーブックはバベルによってソースを構築する

あなたがアプリケーションを構築するためにtypemcriptコンパイラを使用するならば、物語はBabelによって物語を構築します.JSXファクトリについては、Babel Configファイルに設定する必要があります.

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  babel: async options => ({
    ...options,
    presets: [["@babel/typescript", { jsxPragma: "h" }]],
  }),
}

さもなければ、あなたはストーリーファイルにJSX pragmaを書くべきです.

グーバーニーズinit

GoobberはJSライブラリのCSSです.これはsetup 初めてアプリケーションを実行します.

import { setup } from "goober"
import { h, render } from "preact"
import { Button } from "./button"

setup(h)

const App = () => {
  return (
    <div>
      <Button></Button>
    </div>
  )
}

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

しかし、ストーリーブックのファイルは、このエントリポイントを読んでいません.だから、各ストーリーファイルのニーズsetup(h) .

import { setup } from "goober"
import { h } from "preact"
import { Button } from "./button"

setup(h)

export default {
  title: "custom/Button",
  component: Button,
  argTypes: {
    backgroundColor: { control: "color" },
    onClick: { action: "onClick" },
  },
}

const Template = (args: any) => <Button {...args} />

export const Primary = Template.bind({})