集成

与 Tailwind css 一起使用

推荐使用 esbuild 来打包程序。这是一个集成了 tailwind css 的配置文件

// build.js

const esbuild = require("esbuild");
const autoprefixer = require("autoprefixer");
const tailwindcss = require('tailwindcss')
const stylePlugin = require('esbuild-style-plugin')

esbuild
        .build({
          entryPoints: [
            "src/index.css",
            "src/app.js",
          ],
          bundle: true,
          plugins: [
            stylePlugin({
              postcss: {plugins: [tailwindcss, autoprefixer]},
            })
          ],
          external: ['@bysir/hollow'],
          metafile: true,
          outdir: "statics",
          minify: true,
          sourcemap: true,
          treeShaking: true,
          target: ["chrome78"],
          watch: process.env.MODE !== 'prod' ? {
            onRebuild: function (e, result) {
              if (e) {
                console.error(e.message)
              } else {
                console.log("rebuild success")
              }
            }
          } : null,
          write: true,
        })
        .then((e) => {
          console.log("build success")
        })
        .catch((e) => console.error(e.message));

你可能需要学习一点 esbuild，不用担心，它很简单。

和 React 一起使用

虽然 Hollow 使用 Jsx 语法声明的组件和 React 可以公用，但我不建议这样做， 因为 Hollow（Server Side）和 React(Font Side) 是两个不同运行时，公用组件必须是一个存函数组件，不能依赖其他库，这可能会导致在构思公用组件的时候心智负担很大。

与 Alpine.js 一起使用

相比使用 React 作为前端框架，Alpine.js 与 Hollow 更合适。

Hollow 给 jsx 添加了一些扩展语法来满足与 Alpine.js 一起使用

x-on:click.stop

在 jsx 中，标签不支持 : 与 . 等特殊字符，对于 : Hollow 已经做了兼容，无需你关心，但你必须使用 __(两个下划线) 来代替 ., 一个正确的指令是这样的：x-on:click__stop

这是一个例子：

<div
    x-show="$store.isOpen"
    x-transition:enter="tw-ease-in-out tw-duration-500"
    x-transition:enter-start="tw-opacity-0"
    x-transition:enter-end="tw-opacity-100"
    x-transition:leave="tw-ease-in-out tw-duration-500"
    x-transition:leave-start="tw-opacity-100"
    x-transition:leave-end="tw-opacity-0"
    className="tw-fixed tw-inset-0 tw-bg-gray-500 tw-bg-opacity-50 tw-transition-opacity"></div>