前端这些有趣的库

mport { faker } from '@faker-js/faker';

const randomEmail = faker.internet.email(); // Kassandra.Haley@erich.biz

import create from "zustand";

const useStore = create((set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
}));

function Controls() {
  const inc = useStore((state) => state.inc);
  return <button onClick={inc}>one up</button>;
}

function Counter() {
  const count = useStore((state) => state.count);
  return <h1>{count}</h1>;
}

#!/usr/bin/env zx

await $`cat package.json | grep name`;

let branch = await $`git branch --show-current`;
await $`dep deploy --branch=${branch}`;

await Promise.all([$`sleep 1; echo 1`, $`sleep 2; echo 2`, $`sleep 3; echo 3`]);

let name = "foo bar";
await $`mkdir /tmp/${name}`;

# Slidev

Hello World

---

# Page 2

Directly use code blocks for highlighting

---

# Page 3

import { ReactLocation, Router } from "react-location";

const reactLocation = new ReactLocation();

return (
  <Router
    location={reactLocation}
    routes={[
      {
        path: "/",
        element: "Home on the range!",
      },
    ]}
  />
);

const { GPU } = require("gpu.js");
const gpu = new GPU();
const multiplyMatrix = gpu
  .createKernel(function (a, b) {
    let sum = 0;
    for (let i = 0; i < 512; i++) {
      sum += a[this.thread.y][i] * b[i][this.thread.x];
    }
    return sum;
  })
  .setOutput([512, 512]);

const c = multiplyMatrix(a, b);

import createStore from "teaful";

const { useStore } = createStore({
  username: "Aral",
  count: 0,
  age: 31,
  cart: {
    price: 0,
    items: [],
  },
});

function Example() {
  const [username, setUsername] = useStore.username();
  const [cartPrice, setCartPrice] = useStore.cart.price();

  return (
    <>
      <button onClick={() => setUsername("AnotherUserName")}>
        Update {username}
      </button>
      <button onClick={() => setCartPrice((v) => v + 1)}>
        Increment price: {cartPrice}€
      </button>
    </>
  );
}

const canvas = await html2canvas(document.querySelector("#capture"));

const TrackedApp = track(
  // 全局打点数据
  { app: "my-app" },

  // 全局配置
  {
    // dataLayper 为谷歌统计的 API，可在此处与专业打点服务进行对接。
    dispatch: (data) => {
      console.log(data);
      (window.dataLayer = window.dataLayer || []).push(data);
    },
  }
)(App);

const rootElement = document.getElementById("root");
ReactDOM.render(<TrackedApp />, rootElement);

import { useTracking } from "react-tracking";

const FooPage = () => {
  const { Track, trackEvent } = useTracking({ page: "FooPage" });

  return (
    <Track>
      <div
        onClick={() => {
          trackEvent({ action: "click" });
        }}
      />
    </Track>
  );
};

const fetchUser = getUser(10086);
toast.promise(
  fetchUser,
  {
    success: "该用户信息获取成功",
    error: "该用户信息获取失败",
    loading: "正在获取该用户信息",
  },
  {
    style: {
      minwidth: "250px",
    },
    success: {
      duration: 5000,
      icon: "🔥",
    },
  }
);

# Recommended.
$ npx create-node-cli

# Usage
# Run the CLI using
$ npx create-node-cli

CLI name?
CLI command?
CLI description?
CLI version?
CLI license?
CLI author name?
CLI author email?

const copy = require("clipboard-copy");

copy("hello, world");

import React from "react";
import ReactFlow from "react-flow-renderer";

const elements = [
  { id: "1", data: { label: "Node 1" }, position: { x: 250, y: 5 } },
  // you can also pass a React component as a label
  { id: "2", data: { label: <div>Node 2</div> }, position: { x: 100, y: 100 } },
  { id: "e1-2", source: "1", target: "2", animated: true },
];

const BasicFlow = () => <ReactFlow elements={elements} />;

const [text, setText] = useState("Hello");
const [value] = useDebounce(text, 1000);

const [value, setValue] = useState(defaultValue);

const debounced = useDebouncedCallback((value) => {
  setValue(value);
}, 1000);

<table class="charts-css column" id="my-chart">
  ...
</table>

$ ncu
Checking package.json
[====================] 5/5 100%

express           4.12.x  →   4.13.x
multer            ^0.1.8  →   ^1.0.1
react-bootstrap  ^0.22.6  →  ^0.24.0
react-a11y        ^0.1.1  →   ^0.2.6
webpack          ~1.9.10  →  ~1.10.5

Run ncu -u to upgrade package.json

{
  "@context": "https://json-ld.org/contexts/person.jsonld",
  "@id": "http://dbpedia.org/resource/John_Lennon",
  "name": "John Lennon",
  "born": "1940-10-09",
  "spouse": "http://dbpedia.org/resource/Cynthia_Lennon"
}

import React, { useState, useEffect } from "react";
import { render, Text } from "ink";

const Counter = () => {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCounter((previousCounter) => previousCounter + 1);
    }, 100);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return <Text color="green">{counter} tests passed</Text>;
};

render(<Counter />);

# 使用 tsdx 快速开发一个 package
$ npx tsdx create mylib

import { request } from "undici";

const { statusCode, headers, trailers, body } = await request(
  "http://localhost:3000/foo"
);

console.log("response received", statusCode);
console.log("headers", headers);