The testing library for midway hooks


Keywords
midway, hooks, frontend, fullstack, react, serverless, vite, vue
License
MIT
Install
npm install @midwayjs/hooks-testing-library@3.0.0-alpha.0

Documentation

Midway Logo

Functional Fullstack Framework

"Zero" Api & Type Safe & Fullstack Kit & Powerful Backend
At Alibaba, 2800+ full-stack applications are developed based on Midway Hooks (2022.01)

English | 简体中文

Features

  • ☁️ Maximize productivity and developer experience, support fullstack development & API service
  • ⚡️ Fullstack kit that supports React/Vue/Svelte... and more frameworks
  • 🌈 "Zero" Api data layer, import functions from the backend to call the API directly, without the ajax glue layer
  • ⛑️ Type safe, use the identical type definition from frontend to backend, detect errors in advance
  • 🌍 Functional programming, using Hooks for frontend and backend
  • ⚙️ Support for Webpack / Vite based projects
  • ✈️ Deploy to Server or Serverless
  • 🛡 Based on Midway, a powerful Node.js framework that supports enterprise-level application development

🔨 Preview

Frontend(React) Backend(Midway Hooks)
// src/pages/articles.tsx
import { getArticles } from '../api';
import { useRequest } from 'ahooks';
import ArticleList from './components/ArticleList';

export default () => {
  const { data } = useRequest(() =>
    getArticles({
      query: {
        page: '1',
        per_page: '10',
      },
    })
  );

  return <ArticleList articles={data} />;
};

// src/pages/new.tsx
import { createArticle } from '../api';
import Editor from './components/Editor';
import { useState } from 'react';

export default () => {
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (article) => {
    setLoading(true);
    const { id } = await createArticle(article);
    setLoading(false);
    location.href = `/articles/${id}`;
  };

  return (
    <Editor
      loading={loading}
      onSubmit={handleSubmit}
    />
  );
};



// src/api/index.ts
import {
  Api,
  Get,
  Post,
  Validate,
  Query,
  useContext,
} from '@midwayjs/hooks';
import { z } from 'zod';
import db from './database';

export const getArticles = Api(
  Get(),
  Query<{ page: string; per_page: string }>(),
  async () => {
    const ctx = useContext();

    const articles = await db.articles.find({
      page: ctx.query.page,
      per_page: ctx.query.per_page,
    });

    return articles;
  }
);

const ArticleSchema = z.object({
  title: z.string().min(3).max(16),
  content: z.string().min(1),
});

export const createArticle = Api(
  Post(),
  Validate(ArticleSchema),
  async (article: z.infer<typeof ArticleSchema>) => {
    const newArticle = await database.articles.create(article);
    return {
      id: newArticle.id,
    };
  }
);

🧩 Templates

Midway Hooks currently provide the following templates:

You can create applications quickly with templates:

npx degit https://github.com/midwayjs/hooks/examples/<name>

For example, create a fullstack application with react:

npx degit https://github.com/midwayjs/hooks/examples/react

Contribute

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

We use yarn + lerna to manage the project.

  • install dependencies
$ yarn
  • build
$ yarn build
  • watch
$ yarn watch
  • test
$ yarn test

Contributors

Thanks goes to these wonderful people (emoji key):


Lxxyx

💻 🖋 🤔 👀 ⚠️ 📖

Gao Yang

💻 🖋 ⚠️ 📖

狼叔

📖

Eward

💻

Linbudu

📖

This project follows the all-contributors specification. Contributions of any kind welcome!

About

Alibaba Open Source

License

MIT